获取查询在服务器上发送两次

Question

突变的结果应该更新数据而不需要对服务器进行不必要的请求，我不明白需要更正什么，以便数据不会被提取两次，而是从缓存中取出。

  const [createEvent, { loading }] = useMutation(CREATE_GOOD_MUTATION, {
    variables: values,
    update(proxy, result) {
      // TODO: remove goods from cache
      const data = proxy.readQuery({
        query: FETCH_ITEMS_QUERY,
      });
      let newData = [...data.events];
      newData = [result.data.events, ...newData];
      proxy.writeQuery({
        query: FETCH_ITEMS_QUERY,
        data: {
          ...data,
          events: {
            newData,
          },
        },
      });
    },
    // refetchQueries: [
    //   {
    //     query: FETCH_ITEMS_QUERY,
    //   },
    // ],
    onError(err) {
      setErrors(err.message);
    },
  });

enter image description here

变异创造新品：

CREATE_GOOD_MUTATION = gql`
  mutation createEvent(
    $title: String!
    $description: String!
    $price: String!
    $autor: String!
    $pageNumber: String!
    $publishYear: String!
  ) {
    createEvent(
      eventInput: {
        title: $title
        description: $description
        price: $price
        autor: $autor
        pageNumber: $pageNumber
        publishYear: $publishYear
      }
    ) {
      title
      description
      price
    }
  }
`;

查询显示所有产品：

FETCH_ITEMS_QUERY = gql`
  query events {
    events {
      id
      title
      description
      price
    }
  }
`;

当我尝试通过变异创建新商品并显示缓存中的所有产品时，我需要获取它一次，而无需额外请求。

Answer 1

您应该使用proxy.modify 而不是proxy.readQuery/proxy.writeQuery。

Using cache.modify

Making cache updates with mutation.update function

尝试将您的突变update 函数更改为如下内容：

update(proxy, result) {
  proxy.modify({
    fields: {
      events(existingEvents = []) {
        return [...existingEvents, result.data.createEvent];
      }
    }
  })
},