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组件。但我还不知道如何添加乐观UI，因为乐观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行是＆＃39;：＆＃39;。

这里使用的语法是什么？

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>

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

1 个答案: