Relay Modern: Declarative Data-Driven React Apps Development with GraphQL
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)
*.md
in https://github.com/azat-co/relay-modern
code
in https://github.com/azat-co/relay-modern
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,
})
code/dashboad
https://chrome.google.com/webstore/detail/relay-devtools/oppikflppfjfdpjimpdadhelffjpciba
import storeDebugger from 'relay-runtime/lib/RelayStoreProxyDebugger'
storeDebugger.dump(proxyStore)