footer: © NodeProgram.com, Node.University and Azat Mardan 2018 slidenumbers: true theme: Simple, 1 build-lists: true autoscale:true
[.slidenumbers: false] [.hide-footer]
![left](images/azat node interacitev no pipe.jpeg)
- Videos: http://node.university/p/relay-modern
- Slides: in
*.md
in https://github.com/azat-co/relay-modern - Code: in
code
in https://github.com/azat-co/relay-modern
- Introduction
- Relay Modern Configuration and Setup
- Connecting Relay Modern to GraphQL
- Extending the Component Tree with Fragments
- Working with a Collection of Data
- Performing Mutations with Relay Modern
- Advanced Relay Modern Features
- Node v8, npm v5 or higher
- Chrome
- Git
- React, i.e., class, state, props
- JavaScript, i.e., ES6-8
- Node basics, i.e., npm/yarn, package.json
- Optimization and caching
- Data proximity
- Decoupling
- New version of Relay client
- Client for GraphQL backends and front ends - abstraction for queries and mutations
- Supported by Facebook
- Need a pre-runtime compiler (to optimize queries)
- Relay has its own store hence no need for Flux or Redux
- create-react-app
- add react-relay
- add relay-compiler and babel-plugin-relay with -D
- eject
- configure babel
npm i -g create-react-app
create-react-app NAME
cd NAME
npm i
npm start
Open http://localhost:3000 and see React logo spinning
npm i react-relay -E
npm i relay-compiler babel-plugin-relay -DE
npm run eject
Add plugins
field to package.json under babel (create babel if there's none):
"babel": {
"plugins": [
"relay"
]
},
relay-compiler —src ./src —schema ./schema.graphql
Add to package.json as npm script with --watch (recommended):
"scripts": {
"relay": "relay-compiler --src ./src --schema ./schema.graphql --watch"
}
schema.graphql
:
type InstakilogramPost {
id: ID!
name: String!
url: String!
}
npm run relay
createRelayEnvironment.js
source
import {
Environment,
Network,
RecordSource,
Store,
} from 'relay-runtime'
const __RELAY_API_ENDPOINT__ = 'https://api.graph.cool/relay/v1/cjcyfbdyx01bm01582zl2xjnn'
function fetchQuery(
operation,
variables,
) {
return fetch(__RELAY_API_ENDPOINT__, {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({
query: operation.text,
variables,
}),
}).then(response => {
return response.json()
})
}
const network = Network.create(fetchQuery)
const source = new RecordSource()
const store = new Store(source)
export default new Environment({
network,
store,
})
- Express + Mongoose + MongoDB
- Graph.cool (recommended)
- Graph.cool https://console.graph.cool/Dashboard/schema
- React Router https://reacttraining.com/react-router/web/example/basic
- Relay TodoMVC Example https://github.com/relayjs/relay-examples
- Relay Modern API Cheatsheet https://facebook.github.io/relay/docs/en/api-cheatsheet.html
- Relay Guide https://facebook.github.io/relay/docs/en/quick-start-guide.html
- Learn GraphQL http://graphql.org/learn
- Querying Relational Data with GraphQL https://scaphold.io/community/blog/querying-relational-data-with-graphql
- Redux and Relay https://www.reindex.io/blog/redux-and-relay
- Comparing Relay Modern & Apollo https://blog.smartlogic.io/comparing-relay-modern-and-apollo-graphql-client-frameworks
- graph
- nodes
- edges
- mutations
- schema
- types
- fragment
- container
code/dashboad
- Graph.cool
- Customer, Product, Order
- CRA
- Mutations: Created and Delete
- URL Router
- Fragments
https://chrome.google.com/webstore/detail/relay-devtools/oppikflppfjfdpjimpdadhelffjpciba
import storeDebugger from 'relay-runtime/lib/RelayStoreProxyDebugger'
storeDebugger.dump(proxyStore)