javascript - Mutation 组件中 Apollo Optimistic UI 的语法？

Question

正在关注 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])}
            });
        }}
    >

...我遇到了一些语法错误，例如:

Unexpected token, expected } (51:26)

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