突变组件中 Apollo Optimistic UI 的语法？答案

【问题标题】：Syntax for Apollo Optimistic UI in Mutation Component?突变组件中 Apollo Optimistic UI 的语法？
【发布时间】：2018-09-24 22:07:45
【问题描述】：

在the Apollo docs on Mutation components 之后，我有一个工作的 Mutation 组件，看起来像 Apollo 文档中提供的这个示例：

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

现在我想添加 Optimistic UI。因此，我在 Optimistic UI for Mutation Components 上查找了 Apollo 文档，不幸的是，它对 Mutation 组件使用了不同的语法：

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

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

我喜欢第一种语法，并且在该语法中我已经有了一个有效的 Mutation 组件。但我还不知道如何向它添加 Optimistic UI，因为 Optimistic UI 的 Apollo 文档使用不同的语法。

这是我正在使用的 Mutation 组件：

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

我在这里尝试添加 Optimistic 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])}
            });
        }}
    >

...我收到了一些语法错误，例如：

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

...其中第 51 行是 __typename: "Mutation",，第 26 行是':'。

这里使用的正确语法是什么？

【问题讨论】：

标签： javascript graphql apollo react-apollo

【解决方案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>

【讨论】：