History

Jayden Seric 0770470b40 Update the with-graphql-react example. (#7317 ) - Update dependencies, especially graphql-react. - Use the graphql-react v8.2.0 API. - Use a /* GraphQL */ comment template string tag so text editors can syntax highlight, lint and format the GraphQL query.		2019-05-13 09:40:13 -05:00
..
pages	Update the with-graphql-react example. (#7317 )	2019-05-13 09:40:13 -05:00
package.json	Update the with-graphql-react example. (#7317 )	2019-05-13 09:40:13 -05:00
README.md	Remove Deploy To Now buttons (#7126 )	2019-04-24 10:53:58 +02:00

Next.js example with `graphql-react`

graphql-react is a lightweight but powerful GraphQL client for React; the first Relay and Apollo alternative with server side rendering.

See how it can be used in a Next.js app for GraphQL queries with server side rendering and client side data hydration:

In pages/_app.js a custom App component is decorated with the withGraphQL higher-order component from next-graphql-react, generating a graphql prop that populates the Provider component from graphql-react.
In pages/index.js the Query component from graphql-react is used to query the GraphQL Pokémon API and show a picture of Pikachu.

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