2.5 KiB
2.5 KiB
Next.js example with graphql-react
Deploy your own
Deploy the example using ZEIT Now:
Setup
-
Download the example:
curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-graphql-react
-
Change directory to it:
cd with-graphql-react
-
Install it:
npm install
-
Run it:
npm run dev
The idea behind the example
graphql-react
is a GraphQL client for React using modern context and hooks APIs that is lightweight (< 2.5 KB size limited) but powerful; the first Relay and Apollo alternative with server side rendering.
- In
next.config.js
Next.js config is decorated usingwithGraphQLConfig
fromnext-graphql-react
, to exclude specificgraphql-react
andnext-graphql-react
server only imports from the client bundle. - In
pages/_app.js
a customApp
component is decorated with thewithGraphQLApp
higher-order component fromnext-graphql-react
, generating agraphql
prop that populates theGraphQLProvider
component fromgraphql-react
. - In
pages/index.js
theuseGraphQL
React hook fromgraphql-react
is used to query the GraphQL Pokémon API and show a picture of Pikachu.