1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00
next.js/examples/with-relay-modern
Odin Ugedal c486682b44 Relay modern example fixes (#4120)
* Fix with-relay-modern example

Starting with react-relay 1.5.0 the schema canno't be in the same dir as
the src. This can be fixed by excluding the schema dir. Globs should
also be inside quotation marks, to avoid non-deterministic behavior of
different shells.

* Add missing key on BlogPosts
2018-04-07 12:41:26 +02:00
..
components Relay modern example fixes (#4120) 2018-04-07 12:41:26 +02:00
lib Dropped isomorphic-fetch in examples in favor of isomorphic-unfetch. (#3230) 2017-11-04 15:05:16 +01:00
pages Relay Modern Example (#1757) (#2773) 2017-08-14 18:41:12 +02:00
schema Relay Modern Example (#1757) (#2773) 2017-08-14 18:41:12 +02:00
.babelrc Relay Modern Example (#1757) (#2773) 2017-08-14 18:41:12 +02:00
.env Merge v3-beta into master (#2809) 2017-08-27 22:13:35 +02:00
.gitignore Update relay example dependencies & .gitignore (#3365) 2017-12-02 18:07:42 -08:00
.graphqlconfig Simplification of Relay Modern Example (#1757) (#2776) 2017-08-15 07:50:56 +02:00
next.config.js Relay Modern Example (#1757) (#2773) 2017-08-14 18:41:12 +02:00
package.json Relay modern example fixes (#4120) 2018-04-07 12:41:26 +02:00
README.md Examples: stabalise README format and create-next-app usage (#4009) 2018-04-03 14:19:05 +02:00

Deploy to now

Relay Modern Example

How to use

Using create-next-app

Execute create-next-app with Yarn or npx to bootstrap the example:

npx create-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 or clone the repo:

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 now (download):

now

The idea behind the 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.