I have a page that uses GraphQL Relay connection which fetches drafts
.
query {
connections {
drafts(first: 10) {
edges {
node {
... on Draft {
id
}
}
}
}
}
}
In this page, I also create draft through CreateDraftMutation
.
mutation {
createDraft(input: {
clientMutationId: "1"
content: "content"
}) {
draft {
id
content
}
}
}
After this mutation, I want Relay to add the created draft into its store. The best candidate for mutation config is RANGE_ADD, which is documented as following:
https://facebook.github.io/relay/docs/guides-mutations.html
RANGE_ADD Given a parent, a connection, and the name of the newly created edge in the response payload Relay will add the node to the store and attach it to the connection according to the range behavior specified.
Arguments
parentName: string The field name in the response that represents the parent of the connection
parentID: string The DataID of the parent node that contains the connection
connectionName: string The field name in the response that represents the connection
edgeName: string The field name in the response that represents the newly created edge
rangeBehaviors: {[call: string]: GraphQLMutatorConstants.RANGE_OPERATIONS}
A map between printed, dot-separated GraphQL calls in alphabetical order, and the behavior we want Relay to exhibit when adding the new edge to connections under the influence of those calls. Behaviors can be one of 'append', 'ignore', 'prepend', 'refetch', or 'remove'.
The example from the documentation goes as the following:
class IntroduceShipMutation extends Relay.Mutation {
// This mutation declares a dependency on the faction
// into which this ship is to be introduced.
static fragments = {
faction: () => Relay.QL`fragment on Faction { id }`,
};
// Introducing a ship will add it to a faction's fleet, so we
// specify the faction's ships connection as part of the fat query.
getFatQuery() {
return Relay.QL`
fragment on IntroduceShipPayload {
faction { ships },
newShipEdge,
}
`;
}
getConfigs() {
return [{
type: 'RANGE_ADD',
parentName: 'faction',
parentID: this.props.faction.id,
connectionName: 'ships',
edgeName: 'newShipEdge',
rangeBehaviors: {
// When the ships connection is not under the influence
// of any call, append the ship to the end of the connection
'': 'append',
// Prepend the ship, wherever the connection is sorted by age
'orderby(newest)': 'prepend',
},
}];
}
/* ... */
}
If the parent is as obvious as faction, this is a piece of cake, but I've been having hard time identifying parentName and parentID if it came directly from query connections.
How do I do this?
Edit:
This is how query was exported.
export default new GraphQLObjectType({
name: 'Query',
fields: () => ({
node: nodeField,
viewer: {
type: viewerType,
resolve: () => ({}),
},
connections: {
type: new GraphQLObjectType({
name: 'Connections',
which in return is used in the relay container
export default Relay.createContainer(MakeRequestPage, {
fragments: {
connections: () => Relay.QL`
fragment on Connections {
I've been having hard time identifying parentName and parentID if it came directly from query connections.
faction
and ships
in the example from Relay documentation are exactly the same as connections
and drafts
in your case. Each GraphQLObject
has an ID,so does your connections
object. Therefore, for your mutation, parentName
is connctions
and parentID
is the ID of connections
.
query {
connections {
id
drafts(first: 10) {
edges {
node {
... on Draft {
id
}
}
}
}
}
}
By the way, I guessconnections
and drafts
are terms from your application domain. Otherwise, connections
confuses with GraphQL connection type.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With