RelayMutation expects prop to be data fetched by Relay, adding mutation to query not working

Question

I am getting the error:

bundle.js:28169 Warning: RelayMutation: Expected prop `group` supplied to `AddBlock` to be data fetched by Relay. This is likely an error unless you are purposely passing in mock data that conforms to the shape of this mutation's fragment.

It might seem similar to the problem described in this question, but the answer (of making sure the mutation is added to the initial query) is not working as a solution for me. I already have the mutation in the original query.

Here is my relevant code:

export class AddBlock extends Relay.Mutation {
    getMutation() {
        return Relay.QL`mutation { addBlock }`;
    }

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

    getFatQuery() {
        return Relay.QL`
            fragment on AddBlock {
                newBlockEdge,
                group {
                    blocks
                }
            }
        `;
    }

    getConfigs() {
        return [{
            type: 'RANGE_ADD',
            parentName: 'group',
            parentID: this.props.group.id,

            connectionName: 'blocks',
            edgeName: 'newBlockEdge',
            rangeBehaviors: {
                '': 'append',
            },
        }];
    }


    getOptimisticResponse() {
        return {
            newBlockEdge: {
                node: {
                    body: this.props.body
                }
            },
            group: {
                id: this.props.group.id
            }
        }
    }


    static get fragments() {
        return {
            group: () => Relay.QL`
                fragment on GroupNode {
                    id
                }
            `,
        }
    }
}


class Designer extends React.Component {
    ...

    addToBlocks(blocks) {
        // Create a mutation to save to the blocks.
        Relay.Store.commitUpdate(
            new AddBlock({
                body: blocks[0].block,
                group: this.props.group
            })
        );
    }
    ...
}


Designer = Relay.createContainer(Designer, {
  fragments: {

    group: (Component) => Relay.QL`
      fragment on GroupNode {
        title
        visibility
        blocks(first: 20) {
            edges {
                node {
                    ${Block.getFragment('block')}
                    ${UpdateBlockBodyMutation.getFragment('block')}
                    position
                    title
                }
            }
        }
        ${AddBlock.getFragment('group')}
      }
    `,
  }
});

What could I be doing wrong here?

Answer 1

I suspect your mutation fragment isn't actually being used - you should run a test to see that if you add other fields to the AddBlock fragment, you'll find that they aren't being requested...? I'm not 100% sure why (likely something about static get fragments), but not quite sure.

Once you get your mutation fragment actually being used, Relay won't complain anymore since it'll be getting data in the correct way :D