import React from 'react'
import ReactDOM from 'react-dom'
import {gql, connectGraph, graphComponent} from 'react-graphql'
import {print} from 'graphql-tag/printer'
const MyApp = connectGraph({
query: () => gql`
query($userId: ID!) {
user(id: $userId) {
id
name
${AboutUser.getFragment('user')}
}
}
`,
variables: props => ({
userId: props.userId,
}),
})(props => (
<div>
<h1>Welcome, {props.user.name}!</h1>
<hr />
<AboutUser user={props.user} />
</div>
))
const AboutUser = graphComponent({
fragments: {
user: () => gql`
fragment AboutUser on User {
about
}
`,
},
})(props => (
<p>
{props.user.about}
</p>
))
const graphQLContext = createGraphQLContext({
defaultLoadingComponent: Loading,
async executeQuery(query, variables) {
const res = await fetch(, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
query: print(query),
variables,
}),
})
const result = await res.json()
return result
},
})
ReactDOM.render(
<GraphQLProvider context={graphQLContext}>
<MyApp />
</GraphQLProvider>
, document.getElementById('app'))
Licensed under the MIT License.