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

feat(example): add react-relay-network-modern example (#5349)

In this example, we can:
- `QueryRenderer` SSR
- caching the data
- use the feature of `react-relay-network-modern` which is the powerful tool for `relay-modern`

I copy the example `with-relay-modern`, but I just modified the code. Some detail are not modified.
If you think this example is needed, I will fix those. Otherwise, close this **PR** to let me know this example is not needed.
This commit is contained in:
Ting-Hsiang Hsu 2018-11-25 22:14:36 +08:00 committed by Tim Neutkens
parent b63487c331
commit 21d5aebd53
15 changed files with 359 additions and 0 deletions

View file

@ -0,0 +1,8 @@
{
"presets": [
"next/babel"
],
"plugins": [
"relay"
]
}

View file

@ -0,0 +1 @@
RELAY_ENDPOINT=https://api.graph.cool/relay/v1/next-js-with-relay-modern-example

View file

@ -0,0 +1,2 @@
__generated__/
schema/schema.graphql

View file

@ -0,0 +1,8 @@
{
"schemaPath": "schema/schema.graphql",
"extensions": {
"endpoints": {
"dev": "https://api.graph.cool/relay/v1/next-js-with-relay-modern-example"
}
}
}

View file

@ -0,0 +1,70 @@
[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/with-relay-modern)
# Relay Modern Example
## How to use
### Using `create-next-app`
Execute [`create-next-app`](https://github.com/segmentio/create-next-app) with [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) to bootstrap the example:
```bash
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:
```bash
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:
```bash
npm install
# or
yarn
```
Download schema introspection data from configured Relay endpoint
```bash
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)
```bash
npm run relay
# or
yarn relay
```
Run the project
```bash
npm run dev
# or
yarn dev
```
Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download)):
```bash
now
```
## The idea behind the example
[Relay Modern](https://facebook.github.io/relay/docs/relay-modern.html) 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)](https://facebook.github.io/react/docs/higher-order-components.html). 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](https://www.graph.cool) for its GraphQL backend.

View file

@ -0,0 +1,17 @@
import React from 'react'
import { createFragmentContainer, graphql } from 'react-relay'
const BlogPostPreview = props => {
return (
<div key={props.post.id}>{props.post.title}</div>
)
}
export default createFragmentContainer(BlogPostPreview, {
post: graphql`
fragment BlogPostPreview_post on BlogPost {
id
title
}
`
})

View file

@ -0,0 +1,29 @@
import React from 'react'
import { createFragmentContainer, graphql } from 'react-relay'
import BlogPostPreview from './BlogPostPreview'
const BlogPosts = props => {
return (
<div>
<h1>Blog posts</h1>
{props.viewer.allBlogPosts.edges.map(({ node }) =>
<BlogPostPreview key={node.id}post={node} />
)}
</div>
)
}
export default createFragmentContainer(BlogPosts, {
viewer: graphql`
fragment BlogPosts_viewer on Viewer {
allBlogPosts(first: 10, orderBy: createdAt_DESC) {
edges {
node {
...BlogPostPreview_post
id
}
}
}
}
`
})

View file

@ -0,0 +1,36 @@
import {
RelayNetworkLayer,
cacheMiddleware,
urlMiddleware
} from 'react-relay-network-modern/node8'
import RelaySSR from 'react-relay-network-modern-ssr/node8/client'
import { Environment, RecordSource, Store } from 'relay-runtime'
const source = new RecordSource()
const store = new Store(source)
let storeEnvironment = null
export default {
createEnvironment: relayData => {
if (storeEnvironment) return storeEnvironment
storeEnvironment = new Environment({
store,
network: new RelayNetworkLayer([
cacheMiddleware({
size: 100,
ttl: 60 * 1000
}),
new RelaySSR(relayData).getMiddleware({
lookup: false
}),
urlMiddleware({
url: req => process.env.RELAY_ENDPOINT
})
])
})
return storeEnvironment
}
}

View file

@ -0,0 +1,6 @@
import 'isomorphic-fetch'
export const { initEnvironment, createEnvironment } = (!process.browser
? require('./server')
: require('./client')
).default

View file

@ -0,0 +1,35 @@
import { RelayNetworkLayer, urlMiddleware } from 'react-relay-network-modern/node8'
import RelaySSR from 'react-relay-network-modern-ssr/node8/server'
import { Network, Environment, RecordSource, Store } from 'relay-runtime'
export default {
initEnvironment: () => {
const source = new RecordSource()
const store = new Store(source)
const relaySSR = new RelaySSR()
return {
relaySSR,
environment: new Environment({
store,
network: new RelayNetworkLayer([
urlMiddleware({
url: req => process.env.RELAY_ENDPOINT
}),
relaySSR.getMiddleware()
])
})
}
},
createEnvironment: (relayData, key) => {
const source = new RecordSource()
const store = new Store(source)
return new Environment({
store,
network: Network.create(
() => relayData.find(([dataKey]) => dataKey === key)[1]
)
})
}
}

View file

@ -0,0 +1,17 @@
require('dotenv').config()
const path = require('path')
const Dotenv = require('dotenv-webpack')
module.exports = {
webpack: (config, { isServer }) => {
config.plugins.push(
new Dotenv({
path: path.join(__dirname, '.env'),
systemvars: true
})
)
return config
}
}

View file

@ -0,0 +1,33 @@
{
"name": "with-react-relay-network-modern",
"version": "3.0.3",
"description": "Example of Next.js with Relay Modern and react-relay-network-modern",
"scripts": {
"graphcool-init": "graphcool init --schema schema/init-schema.graphql",
"dev": "next",
"build": "next build",
"start": "next start",
"relay": "relay-compiler --src ./ --exclude '**/.next/**' '**/node_modules/**' '**/test/**' '**/__generated__/**' --exclude '**/schema/**' --schema ./schema/schema.graphql",
"schema": "graphql get-schema dev"
},
"author": "",
"license": "ISC",
"dependencies": {
"dotenv": "^4.0.0",
"dotenv-webpack": "^1.5.4",
"graphql": "^0.13.2",
"isomorphic-fetch": "2.2.1",
"next": "latest",
"react": "^16.2.0",
"react-dom": "^16.2.0",
"react-relay": "^1.5.0",
"react-relay-network-modern": "2.4.0",
"react-relay-network-modern-ssr": "1.2.1"
},
"devDependencies": {
"babel-plugin-relay": "^1.4.1",
"graphcool": "^1.2.1",
"graphql-cli": "^1.0.0-beta.4",
"relay-compiler": "^1.5.0"
}
}

View file

@ -0,0 +1,59 @@
import React from 'react'
import { QueryRenderer, fetchQuery } from 'react-relay'
import NextApp, { Container } from 'next/app'
import {
initEnvironment,
createEnvironment
} from '../lib/createEnvironment'
export default class App extends NextApp {
static getInitialProps = async ({ Component, router, ctx }) => {
const { variables } = Component.getInitialProps ? await Component.getInitialProps(ctx) : {}
try {
if (initEnvironment) {
const { environment, relaySSR } = initEnvironment()
await fetchQuery(environment, Component.query, variables)
return {
variables,
relayData: await relaySSR.getCache()
}
}
} catch (e) {
console.log(e)
}
return {
variables
}
};
render () {
const { Component, variables = {}, relayData } = this.props
const environment = createEnvironment(
relayData,
JSON.stringify({
queryID: Component.query ? Component.query().name : undefined,
variables
})
)
return (
<Container>
<QueryRenderer
environment={environment}
query={Component.query}
variables={variables}
render={({ error, props }) => {
if (error) return <div>{error.message}</div>
else if (props) return <Component {...props} />
return <div>Loading</div>
}}
/>
</Container>
)
}
}

View file

@ -0,0 +1,31 @@
import React, { Component } from 'react'
import { graphql } from 'react-relay'
import BlogPosts from '../components/BlogPosts'
export default class Index extends Component {
/**
* if you need to use variables
*
* static getInitialProps = async () => ({
* variables: {
* key: 'value',
* },
* });
*/
static query = graphql`
query pages_indexQuery {
viewer {
...BlogPosts_viewer
}
}
`;
render () {
return (
<div>
<BlogPosts viewer={this.props.viewer} />
</div>
)
}
}

View file

@ -0,0 +1,7 @@
type BlogPost implements Node {
content: String!
createdAt: DateTime!
id: ID! @isUnique
title: String!
updatedAt: DateTime!
}