CODEWITHSUNDEEP
relayjsgraphql
Ryan
Ryan

Reputation: 7957

Mutation not fetching data specified by the fat query in conjunction with RANGE_ADD?

I'm trying to understand RANGE_ADD. I've provided the mutation config, for RANGE_ADD, with all the required information. I use the viewer naming convention, with my connections nested within viewer. Below is what my complete Relay Mutation looks like ...

import Relay from "react-relay";

export default class CreateTeamMutation extends Relay.Mutation {
  static fragments = {
    viewer: () => Relay.QL`
      fragment on Viewer {
        id
      }
    `
  }

  getMutation() {
    return Relay.QL`
      mutation { createTeam }
    `;
  }

  getVariables() {
    return {
      name: this.props.name
    };
  }

  getFatQuery() {
    return Relay.QL`
      fragment on CreateTeamPayload {
        edge,
        viewer {
          teams
        }
      }
    `;
  }

  getConfigs() {
    console.log(this.props.viewer);
    return [{
      type: "RANGE_ADD",
      edgeName: "edge",
      parentID: this.props.viewer.id,
      parentName: "viewer",
      connectionName: "teams",
      rangeBehaviors: {
        "": "append"
      }
    }];
  }
};

I provide a fragment for the viewer id, which at run-time, within getConfigs, I can see is present.

In the GraphQL Mutation response payload, CreateTeamPayload, the viewer field is provided so that Relay can make use of the connection within the mutation config for RANGE_ADD. Also, within CreateTeamPayload, the new edge is provided as edge.

These three bits of info (viewer id for the parent, the connection information and the edge) seem to be all that RANGE_ADD demands. I also make sure to request this data from the server, via the fat query so that Relay has access to it for the mutation config.

Relay does not seem to be including what I've specified in the fat query, and what is required for the mutation config, in what it dispatches to the server, though. All that Relay is requesting is the clientMutationId. Here is the request made by Relay ...

{
  "query": "mutation CreateTeamMutation($input_0:CreateTeamInput!){createTeam(input:$input_0){clientMutationId}}",
  "variables": {
    "input_0": {
      "name": "foo bar",
      "clientMutationId": "0"
    }
  }
}

And, in chain reaction fashion, this causes Relay, who is expecting the viewer and edge for the mutation config, to throw an error ...

Warning: writeRelayUpdatePayload(): Expected response payload to include the newly created edge `edge` and its `node` field. Did you forget to update the `RANGE_ADD` mutation config?

Those required fields could totally be there if Relay had included them. Does RANGE_ADD have to be accompanied by REQUIRED_CHILDREN for this to work? The mutation goes through to the server, and the record is created on the server, it's just the client-side mutation config fails to incorporate the changed data into the store.

Upvotes: 4

Views: 557

Answers (1)

XuoriG
XuoriG

Reputation: 610

This is probably a case of an ambiguous warning: https://github.com/facebook/relay/issues/542

Relay intersects the range behaviours with the previously fetched connections.

Your range behaviors here only define what to do when the teams connection is not under the influence of any call. How are you calling your teams connection in the app ?

For example if your app fetches teams(order_by: 'recent'), you should define a range behavior like this one 'orderby(recent)': 'append'

Upvotes: 2

Related Questions