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

1. 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

2. Change directory to it:

   cd with-graphql-react

3. Install it:

   npm install

4. Run it:

   npm run dev