React Relay Update A Root Query As Part Of A Mutation Fat Query
I am trying to build an application using GraphQL and React Relay.
As part of this I have created a root query with the following specification:
query {
AllServices {
edges {
node {
id
}
}
}
}
So I have created a mutation - which works well - called CreateGithubService.
Here is a snippet from the Relay mutation:
getFatQuery() {
return Relay.QL`
fragment on CreateGithubServicePayload {
createdService
}
`
}
getConfigs() {
return [{
type: "REQUIRED_CHILDREN",
children: [
Relay.QL`
fragment on CreateGithubServicePayload {
createdService {
id
}
}
`
]
}]
}
The problem I have is that this is not causing the views which rely on the information to update.
My AllServices query is not refetched and I am unable to specify it in the Fat Query.
How can I setup my mutation to add the element to the all services query?
Thanks!
Answer
REQUIRED_CHILDREN
will not update the local graph; it's strictly for fetching extra data that is only used in the success callback of the mutation update. In fact, it's not even documented outside of the source code, so I'm not sure how you decided to use it like this...
Although you haven't said so, I assume you want this new node (createdService
) to be added to the AllServices
connection? If so, you need to tell Relay that your mutation affects that connection:
At the moment, Relay basically assumes all mutations affect nodes, not arbitrary queries. To my knowledge, you won't be able to configure a mutation to update a non-node root query. Therefore, you should add a node at the root that acts as the parent of your
AllServices
connection (the convention for this is typicallyviewer
). In other words, make it work like this:query { viewer { AllServices { ... } } }
Your mutation payload should always return everything that has been changed, not just the new data. That means you need a way to refetch the
AllServices
connection from the payload. Once you add theviewer
node to your schema, you can return that node in the mutation payload and change your fat query to specify that the connection has changed, e.g.:fragment on CreateGithubServicePayload { viewer { AllServices } }
- Given those two schema changes, you can then configure your mutation using
FIELDS_CHANGE
and specify the fieldIDs like{ viewer: this.props.viewer.id }
Related Questions
- → Import statement and Babel
- → should I choose reactjs+f7 or f7+vue.js?
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → .tsx webpack compile fails: Unexpected token <
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → React Native with visual studio 2015 IDE
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
- → How do I determine if a new ReactJS session and/or Browser session has started?
- → Alt @decorators in React-Native
- → How to dynamically add class to parent div of focused input field?