mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00

History

Jayden Seric eb24e6ffc6 Add an example with graphql-react (#5984 ) Adds an example with [`graphql-react`](https://github.com/jaydenseric/graphql-react), using [`next-graphql-react`](https://github.com/jaydenseric/next-graphql-react). [`graphql-react`](https://github.com/jaydenseric/graphql-react) is a lightweight but powerful [GraphQL](https://graphql.org) client for React; the first [Relay](https://facebook.github.io/relay) and [Apollo](https://apollographql.com/docs/react) alternative with server side rendering.		2019-01-09 10:24:38 +01:00
..
pages	Add an example with graphql-react (#5984 )	2019-01-09 10:24:38 +01:00
package.json	Add an example with graphql-react (#5984 )	2019-01-09 10:24:38 +01:00
README.md	Add an example with graphql-react (#5984 )	2019-01-09 10:24:38 +01: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