Skip to content
Next.js config and App decorators for graphql-react, enabling server side rendered GraphQL queries.
Branch: master
Clone or download
Latest commit 108f271 Apr 15, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src Update examples for graphql-react v8.2.0. Apr 15, 2019
.editorconfig
.gitignore Changes for graphql-react v7 compatibility. Jan 31, 2019
.npmrc
.prettierignore Initial commit. Jan 2, 2019
.travis.yml
changelog.md Version 3.0.1. Apr 15, 2019
package.json Version 3.0.1. Apr 15, 2019
readme.md Update examples for graphql-react v8.2.0. Apr 15, 2019

readme.md

graphql-react logo

next-graphql-react

npm version Build status

Next.js config and App decorators for graphql-react, enabling server side rendered GraphQL operations.

Setup

To install next-graphql-react and the graphql-react peer dependency from npm run:

npm install next-graphql-react graphql-react

See the withGraphQLConfig and withGraphQLApp examples to get started.

Support

Consider polyfilling:

API

Table of contents

function withGraphQLApp

A higher-order React component to decorate a Next.js custom App component in pages/_app.js for graphql-react, enabling descendant GraphQL operations with server side rendering and client side data hydration.

Parameter Type Description
App Object Next.js custom App component.

Returns: WithGraphQL — Next.js custom App higher-order component.

See

Examples

A custom App.

In pages/_app.js:

import 'cross-fetch/polyfill'
import { GraphQLProvider } from 'graphql-react'
import { withGraphQLApp } from 'next-graphql-react'
import App, { Container } from 'next/app'

class CustomApp extends App {
  render() {
    const { Component, pageProps, graphql } = this.props
    return (
      <Container>
        <GraphQLProvider graphql={graphql}>
          <Component {...pageProps} />
        </GraphQLProvider>
      </Container>
    )
  }
}

export default withGraphQLApp(CustomApp)

function withGraphQLConfig

A higher-order function to decorate a Next.js custom config in next.config.js for graphql-react, that excludes server only graphql-react/server imports from the client bundle.

Parameter Type Description
config Object Next.js custom config.

Returns: Object — Next.js custom config.

See

Examples

A custom config.

In next.config.js:

const { withGraphQLConfig } = require('next-graphql-react/server')

module.exports = withGraphQLConfig({
  // Custom config…
})
You can’t perform that action at this time.