使用 apollo 缓存调用一次存储的 fetch API？

Posted 2023-03-08

【中文标题】使用 apollo 缓存调用一次存储的 fetch API？

【英文标题】：Call a fetch API which is stored once in using apollo cache?

【发布时间】：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(" "));
  
,
);

【参考方案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() 解决了这个问题

重新获取后，缓存会自动清除。你能告诉我你是如何重新获取的吗？