【问题标题】:Call a fetch API which is stored once in using apollo cache?使用 apollo 缓存调用一次存储的 fetch API?
【发布时间】:2020-02-27 11:44:38
【问题描述】:

我一直在研究 Apollo GQL。我正在使用 apollo 缓存来减少不需要的 API 调用。我现在面临的问题是,当我更新了数据时,我不应该重新获取数据,因为 API 已经被调用过一次并存储在缓存中。

  • 我想做的是清除特定查询的缓存或从服务器重新获取数据。!!
  • 我无法清除整个缓存,因为我调用了很多 API

我必须在以下突变调用后重新获取数据。

const [
reopenInvoice,
{ loading: reopenLoading, data: reopenData, error: reopenError },
] = useMutation<IReopenData, IReopenVariables>(INVOICE_CLONE, {
onCompleted: ({ invoiceClone: { errors, status } }) => {
  if (!errors || !errors.length) {
    message.success("Invoice Reopened");
  } else {
    message.error(errors.join(" "));
  }
},
});

【问题讨论】:

    标签: reactjs graphql apollo apollo-cache-inmemory


    【解决方案1】:

    “refetchQueries”是更新缓存最简单的方法。

    https://www.apollographql.com/docs/angular/features/cache-updates/#refetchqueries

     const [reopenInvoice, { loading: reopenLoading, data: reopenData, error: reopenError }] = useMutation<IReopenData, IReopenVariables>(
            INVOICE_CLONE,
            {
                onCompleted: ({ invoiceClone: { errors, status } }) => {
                    if (!errors || !errors.length) {
                        message.success("Invoice Reopened");
                    } else {
                        message.error(errors.join(" "));
                    }
                },
                refetchQueries: [
                    {
                        query: TO_REFETCH_QUERY,
                        variables: {
                            id: objectID,
                        },
                    },
                ],
            }
        );
    

    【讨论】:

    • 现在我遇到了另一个问题。它重新获取查询。但不更新用户界面
    • 您确定使用相同的查询名称重新获取吗?
    • 问题是它更新了缓存,但它没有更新 UI,我使用 refetch() 解决了这个问题
    • 重新获取后,缓存会自动清除。你能告诉我你是如何重新获取的吗?
    猜你喜欢
    • 2015-07-30
    • 2021-02-08
    • 2016-10-16
    • 2018-05-21
    • 2021-11-27
    • 2016-04-16
    • 1970-01-01
    • 2014-04-03
    • 2023-03-19
    相关资源
    最近更新 更多