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

Question

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

我有一个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）的好教程

Answer 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