Question

我正在使用nextjs和apollo（带有react钩子）。我正在尝试更新阿波罗缓存中的用户对象（我不想重新提取）。发生的情况是，用户似乎正在缓存中进行更新，但是组件使用的用户对象未进行更新。这是相关代码：

页面：

// pages/index.js

...

const Page = ({ user }) => {
  return <MyPage user={user} />;
};


Page.getInitialProps = async (context) => {
  const { apolloClient } = context;
  const user = await apolloClient.query({ query: GetUser }).then(({ data: { user } }) => user);

  return { user };
};

export default Page;

以及组件：

// components/MyPage.jsx

...

export default ({ user }) => {
  const [toggleActive] = useMutation(ToggleActive, {
    variables: { id: user.id },
    update: proxy => {
      const currentData = proxy.readQuery({ query: GetUser });

      if (!currentData || !currentData.user) {
        return;
      }

      console.log('user active in update:', currentData.user.isActive);

      proxy.writeQuery({
        query: GetUser,
        data: {
          ...currentData,
          user: {
            ...currentData.user,
            isActive: !currentData.user.isActive
          }
        }
      });
    }
  });

  console.log('user active status:', user.isActive);

  return <button onClick={toggleActive}>Toggle active</button>;
};

当我连续按下按钮时，更新功能中的控制台日志显示用户活动状态为来回翻转，因此看来阿波罗缓存正在正确更新。但是，组件中的控制台日志始终显示相同的状态值。

我看不到我正在执行的其他任何apollo缓存更新中发生的问题，其中使用useQuery钩子在组件中获取了组件使用的数据对象（即，不是从查询中getInitialProps。

下一步/阿波罗：如果在getInitialProps中运行了相关查询，如何正确更新阿波罗缓存

0 个答案: