如何添加我的订阅数据以更新我之前的查询

Posted 2023-03-08

【中文标题】如何添加我的订阅数据以更新我之前的查询

【英文标题】：How to add my subscription data to update my previous query

【发布时间】：2021-03-21 16:57:18

【问题描述】：

我有一个查询和一个订阅，我想做的是将我的数据添加到上一个查询中，以便它显示完整列表。

我有一个query，它返回给我学生列表，我正在像下面这样在 UI 上呈现它

    function Test(props) 
    const  loading, data: dta  = useQuery(GETSTUDENTS);
    const  data: d  = useSubscription(GETSUBSTUDENTS, 
        onSubscriptionData: ( subscriptionData:  data  ) => 
            let fname = data.getSubStudent.fname;
            let lname = data.getSubStudent.lname;
            dta.getStudents.push( fname, lname );
        ,
    );

    return (
        <div className="">
            dta &&
                dta.getStudents.map((li) => 
                    <div>
                        <p>li.fname</p>
                        <p>li.lname</p>
                    </div>;
                )
        </div>
    );


export default Test;

但主要问题是上述问题没有更新缓存，所以当我更改路由并再次返回时，它只需要以前的数据。

所以我想知道什么是最好的方法，我也检查了subscribeToMore，但不知道如何实现它以及它如何与钩子一起工作。

我从订阅中获取了一些数据，在此基础上我想更改其他部分以便我可以使用 refetchQueries 我没有找到任何使用 qraphql 使用钩子（react-apollo-hooks）的好教程

【参考方案1】：

首先，您可以只使用 useQuery 的池选项而不是订阅， 我建议你检查一下。 来自 Apollo 文档：

“在大多数情况下，您的客户不应使用订阅 与您的后端保持同步。相反，您应该轮询 间歇性地进行查询，或者在 用户执行相关操作。” Apollo subscription

如果您仍想使用订阅，我认为您应该使用 subscribeToMore 并在 apollo 缓存文件中更新您的缓存策略：

 const cache = new InMemoryCache(
  typePolicies: 
    Agenda: 
      fields: 
        tasks: 
          merge(existing = [], incoming: any[]) 
            return [...existing, ...incoming];
          ,
        ,
      ,
    ,
  ,
);

您可以在此处阅读更多信息：merge cahce

并查看该视频：youtube apollo cache

【讨论】：

你分享的链接我已经看到了，但我不知道你在那个new InMemoryCache 中做什么，你能用我上面的代码解释一下吗，我应该怎么做

你应该有一个带有 InMemoryCache conf 的文件，然后你需要用你的缓存初始化你的 apollo 客户端： const apolloClient = new ApolloClient( link: ..., cache: apolloCache, connectToDevTools: ..., ... ) 内存缓存，您可以定义如何合并调用，例如用户查询：typePolicies: 查询： fields: users: keyArgs: false, merge(existing : User[], 传入：User[]) return [...(existing || []), ...incoming] , , , , ,