如何使用reactjs @apollo/client v3获取所有缓存数据

Question

无论如何，我可以检查所有缓存，例如：apollo 内的更改以进行调试。 像 redux store 这样的东西，你可以在其中查看整个状态树。

他们提到：

缓存按 ID 将对象存储在平面查找表中。 https://www.apollographql.com/docs/react/caching/cache-configuration/

有什么方法可以显示/控制台整个查找表吗？

Answer 1

对于@apollo/client v3

找到答案了，如果有人感兴趣的话。

1. 通过

   InMemoryCache

您可以通过控制台记录使用 InMemoryCache 创建的缓存对象。 您应该能够在您创建的缓存下找到它：

const cache = new InMemoryCache({"...Your option"})
console.log(cache.data) // <- Your cache query

2. 通过

   browser console

通过浏览器，使用控制台登录

data

__APOLLO_CLIENT__.cache.data

3. 通过

   apollo

   v3

通过apollo客户端缓存访问

const client = useApolloClient();
const serializedState = client.cache.extract();
console.log(serializedState) <- your cache query

Answer 2

我刚刚安装了 Chrome 的 Apollo 客户端扩展，似乎可以工作，开发工具中现在有“Apollo”选项卡

https://chrome.google.com/webstore/detail/apollo-client-devtools/jdkknkkbebbapilgoeccciglkfbmbnfm?hl=en-US

我使用“readQuery”方法从缓存中获取数据，可能不是最好的方法。

import { useApolloClient, gql } from '@apollo/client';

...

const WEBSITE_TITLE = gql`
  query GetSitewide {
    sitewide {
      data {
        attributes {
          header {
            __typename
            id
            siteTitle
          }
        }
      }
    }
  }
`;

...

function WebsiteTitle() {
  const client = useApolloClient();
  const {
    sitewide: {
      data: {
        attributes: { header },
      },
    },
  } = client.readQuery({
    query: WEBSITE_TITLE,
  });

  const { siteTitle } = header;

  return <> {siteTitle} </>;
}

export default WebsiteTitle;

Answer 3

您可以使用 Apollo Inspector 扩展以 json 格式复制整个缓存，然后将其复制到任何编辑器来检查商店。

https://chromewebstore.google.com/detail/apollo-inspector/onjpbondiicnaofbdmhmjobnlchakpan

虽然要运行扩展，您需要执行以下操作

1. Single Apollo Client Instance

   ：如果您的 Web 应用程序有 Apollo 客户端的单个实例，请将其附加到窗口对象上的

   __APOLLO_CLIENT__

   变量。

2. Multiple Apollo Client Instances

   ：如果您的 Web 应用程序有 Apollo Client 的多个实例，请创建一个包含所有这些实例的数组 (ClientObject[])，并将其附加到窗口对象上的

   __APOLLO_CLIENTS__

   变量。