突变组件中阿波罗乐观UI的语法？

Question

在阿波罗基因突变元件的研究之后，我有一个工作突变组件，类似于阿波罗文档中提供的示例：

<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]) }
    });
  }}
>

现在我想添加乐观的UI。因此，我在变异组件的乐观UI上查找阿波罗文档，我发现不幸的是，它对突变组件使用了不同的语法：

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

例如，在第一个语法中没有mutate =>。

我喜欢第一种语法，而且在这个语法中我已经有了一个工作的变异组件。但我还不知道如何向其添加乐观UI，因为用于乐观UI的阿波罗文档使用了不同的语法。

这是我的工作突变组件：

    <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>

在这里，我尝试向它添加乐观的UI：

   <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我收到了一些语法错误，例如：

意外令牌，预期} (51:26)

...where第51行是__typename: "Mutation",，字符26是':‘。

这里正确的语法是什么？

Answer 1

我找到了。

    <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>