apollo-link-state 以及如何访问本地状态/缓存？

Posted 2023-03-10

【中文标题】apollo-link-state 以及如何访问本地状态/缓存？

【英文标题】：apollo-link-state and how do I access the local state / cache?

【发布时间】：2019-06-30 00:43:08

【问题描述】：

也许我只是没有得到 apollo-link-state 的功能，但我想如果我有一个“默认”值，它会通过 Provider 显示在我的道具中。然而，我找不到它。您如何访问“缓存”或本地状态？

我有：

import  ApolloClient, createNetworkInterface  from 'react-apollo';
import  InMemoryCache  from 'apollo-cache-inmemory';
import  withClientState  from 'apollo-link-state';
import dataIdFromObject from './dataIdFromObject';

const defaults = 
  NAME: 'Biff'
;
const resolvers = ;

const cache = new InMemoryCache();
const stateLink = withClientState( cache, resolvers, defaults );

const apolloClient = new ApolloClient(
  cache,
  link: stateLink,
  networkInterface: createNetworkInterface(
    uri: `$config.url/graphql`,
    opts: 
      credentials: 'include'
    
  ),
  addTypename: true,
  dataIdFromObject
);

我正在为我的解析器传递一个空对象，因为复制后端中的所有减速器绝对没有意义。我想我会在道具中看到“名字：Biff”。没有。

商店是我的“redux”商店，不是这个问题的一部分。我想用那个“客户端”道具，我会看到我的默认值。没有。

  <ApolloProvider store=this.props.store client=apolloClient>

当我在子组件中记录我的道具时，任何地方都没有缓存或“名称：Biff”的迹象。我如何在我的子组件中获得这个本地状态。如果我用突变更新它，我应该会看到我的组件重新呈现并可以访问新更新的本地状态......但是......它在哪里？

【问题讨论】：

在相关说明中，您可能需要重新访问最新的文档并更新您的 apollo-client 和 react-apollo 版本。 ApolloProvider 不再将 store 作为道具，并且不依赖于 redux 存储。这就是 InMemoryCache 的用途。同样，链接已替换createNetworkInterface。如果您使用的是 2.0 版，您甚至不能导入它

很奇怪，因为我有 v2+。我会查一下附加要求。

【参考方案1】：

如文档中所述，您可以像查询远程服务器一样查询本地状态，只是您添加了 @client 指令以让 Apollo 知道您正在通过 apollo-link-state 请求某些内容。所以我们需要一个 GraphQL 查询，用 graphql-tag 模板文字标签包裹：

const GET_NAME = gql`
  query 
    NAME @client
  
`

我们像使用任何其他查询一样使用它：

<Query query=GET_NAME>
  ( loading, error, data ) => 
    // render appropriate component depending on loading/error state
  
</Query>

虽然 Apollo 公开了 reading and writing to the cache 的方法，但这些方法只应在为您的本地状态创建突变的上下文中使用。查询缓存应该通过Query 组件完成，而实际改变缓存应该通过Mutation 组件完成。您可以在文档中阅读有关编写自己的突变的更多信息。

【讨论】：

我认为这对我不起作用，因为使用 graphql 我无法使用查询中未声明的其他数据更新我的本地状态/缓存。例如，假设我有一个会话查询： const Session = gql` query products: id `，但是然后我运行了一些突变来更新产品，其信息比“id”多得多。他们没有显示。现在，基本上我想“建立”一个查询......这可能吗？当我在应用程序中移动时，它需要我之前更新/变异的数据。如果我将所有这些数据都放在会话查询中，这是最好的。

如果状态尽可能平坦，可能更容易管理状态，但如果您想要一个巨大的对象来管理状态，它应该仍然是可能的。无论哪种方式，关键是当您将对象写入缓存以初始化该对象的所有属性时，即使它只是使用null 或空数组。你不能只写id，因为这会导致请求额外字段的查询失败。

无论哪种方式，如果您在使突变与 apollo-link-state 一起工作时遇到问题，我会阅读文档，搜索现有问题，然后如果您仍然无法解决您的问题，请发布新问题。您最初的问题是“我如何访问我的缓存”，希望得到答案。