76a08c9671
* Example with-react-relay-network-modern: update dependencies * Example with-react-relay-network-modern: move relay __generated__ out of pages dir * Example with-react-relay-network-modern: fix some errors - Without checking if props.allBlogPosts exists it fails sometimes on "TypeError: Cannot read property 'edges' of undefined" - I have no idea how it could work before with Component.query().params.name, but maybe some dependent library API has changed * Example with-relay-modern-server-express: update dependencies * Example with-relay-modern-server-express: move relay __generated__ out of pages dir Fixes Error: Build optimization failed: found page without a React Component as default export in pages/__generated__/pages_indexQuery.graphql * Example with-relay-modern: update dependencies * Example with-react-relay-network-modern: fix prettier errors |
||
|---|---|---|
| .. | ||
| components | ||
| lib | ||
| pages | ||
| queries | ||
| schema | ||
| .babelrc | ||
| .env | ||
| .gitignore | ||
| .graphqlconfig | ||
| next.config.js | ||
| package.json | ||
| README.md | ||
Relay Modern Example
Relay Modern is a new version of Relay designed from the ground up to be easier to use, more extensible and, most of all, able to improve performance on mobile devices. Relay Modern accomplishes this with static queries and ahead-of-time code generation.
In this simple example, we integrate Relay Modern seamlessly with Next by wrapping our pages inside a higher-order component (HOC). Using the HOC pattern we're able to pass down a query result data created by Relay into our React component hierarchy defined inside each page of our Next application. The HOC takes options argument that allows to specify a query that will be executed on the server when a page is being loaded.
This example relies on graph.cool for its GraphQL backend.
Deploy your own
Deploy the example using ZEIT Now:
How to use
Using create-next-app
Execute create-next-app with npm or Yarn to bootstrap the example:
npm init next-app --example with-relay-modern with-relay-modern-app
# or
yarn create next-app --example with-relay-modern with-relay-modern-app
Download manually
Download the example:
curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-relay-modern
cd with-relay-modern
Install it:
npm install
# or
yarn
Download schema introspection data from configured Relay endpoint
npm run schema
# or
yarn schema
Run Relay ahead-of-time compilation (should be re-run after any edits to components that query data with Relay)
npm run relay
# or
yarn relay
Run the project
npm run dev
# or
yarn dev
Deploy it to the cloud with ZEIT Now (Documentation).