Syntax for Apollo Optimistic UI in Mutation Component?

Question

Following the Apollo docs on Mutation components, I have a working Mutation component that looks like this example provided in the Apollo docs:

<Mutation
  mutation={ADD_TODO}
  update={(cache, { data: { addTodo } }) => {
    const { todos } = cache.readQuery({ query: GET_TODOS });
    cache.writeQuery({
      query: GET_TODOS,
      data: { todos: todos.concat([addTodo]) }
    });
  }}
>

Now I want to add Optimistic UI. So I look up the Apollo docs on Optimistic UI for Mutation Components, and I see that unfortunately it uses a different syntax for Mutation components:

  <Mutation mutation={UPDATE_COMMENT}>
    {mutate => {
      <AddComment
        addComment={({ commentId, commentContent }) =>
          mutate({
            variables: { commentId, commentContent },
          })
        }
      />;
    }}
  </Mutation>

For example, there's no mutate => in the first syntax.

I like the first syntax, and I already have a working Mutation component in that syntax. But I don't yet know how to add Optimistic UI to it because the Apollo docs for Optimistic UI use a different syntax.

Here's my working Mutation component:

    <Mutation
        mutation={CREATE_RESOLUTION}
        update={(cache, {data: {createResolution}}) => {
            const {resolutions} = cache.readQuery({query: GET_RESOLUTIONS_FOR_MUTATION_COMPONENT});
            cache.writeQuery({
                query: GET_RESOLUTIONS_FOR_MUTATION_COMPONENT,
                data: {resolutions: resolutions.concat([createResolution])}
            });
        }}
    >
        {(createResolution, {data}) => (
            <div>
                <form
                    onSubmit={e => {
                        e.preventDefault();
                        createResolution({
                            variables: {
                                name: input.value
                            },
                        });
                        input.value = "";
                    }}
                >
                    <input
                        ref={node => {
                            input = node;
                        }}
                    />
                    <button type="submit">Submit</button>
                </form>
            </div>
        )}
    </Mutation>

Here I'm trying to add Optimistic UI to it:

   <Mutation
        mutation={CREATE_RESOLUTION}
        optimisticResponse={
            __typename: "Mutation",
            submitComment: {
            __typename: "Resolution",
            completed: false,
            goals: [],
            _id: "012345"
        }
        },
        update={(cache, {data: {createResolution}}) => {
            const {resolutions} = cache.readQuery({query: GET_RESOLUTIONS});

            resolutions.push(createResolution);

            cache.writeQuery({
                query: GET_RESOLUTIONS,
                data: {resolutions: resolutions.concat([createResolution])}
            });
        }}
    >

...and I'm getting a number of syntax errors, e.g.:

Unexpected token, expected } (51:26)

...where line 51 is __typename: "Mutation", and character 26 is the ':'.

What is the correct syntax to use here?

VikR VikR · Accepted Answer · 2018-04-14T23:56:58

I found it.

    <Mutation
        mutation={CREATE_RESOLUTION}
        update={(cache, {data: {createResolution}}) => {
            const {resolutions} = cache.readQuery({query: GET_RESOLUTIONS_FOR_MUTATION_COMPONENT});
            cache.writeQuery({
                query: GET_RESOLUTIONS_FOR_MUTATION_COMPONENT,
                data: {resolutions: resolutions.concat([createResolution])}
            });
        }}
    >
        {(createResolution, {data}) => (
            <div>
                <form
                    onSubmit={e => {
                        e.preventDefault();
                        createResolution({
                            variables: {
                                name: input.value
                            },
                            optimisticResponse: {
                                __typename: "Mutation",
                                createResolution: {
                                    __typename: "Resolution",
                                    completed: false,
                                    goals: [],
                                    _id: "012345",
                                    name: input.value
                                }
                            }
                        });
                        input.value = "";
                    }}
                >
                    <input
                        ref={node => {
                            input = node;
                        }}
                    />
                    <button type="submit">Submit</button>
                </form>
            </div>
        )}
    </Mutation>

Syntax for Apollo Optimistic UI in Mutation Component?

1 Answers