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

Question

也许我只是没有得到 apollo-link-state 的作用，但我想如果我有一个 "default" 值，它会通过提供者显示在我的道具中。然而，我找不到它。您如何访问 "cache" 或本地状态？

我有：

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
});

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

这家商店是我的 "redux" 商店，不属于这个问题的一部分。我想用那个 "client" 道具，我会看到我的默认值。没有。

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

当我在子组件中记录我的道具时，没有任何缓存或 "name: Biff" 的迹象。我如何在我的子组件中获得这个本地状态。如果我用突变更新它，我应该看到我的组件重新渲染并可以访问新更新的本地状态...但是..它在哪里？

Answer 1

如文档中所述，您查询本地状态就像查询远程服务器一样，除了您附加 @client 指令让 Apollo 知道您正在通过 [=13= 请求某些东西].所以我们需要一个 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 组件完成。您可以在文档中阅读有关编写自己的突变的更多信息。

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

apollo-link-state and how do I access the local state / cache?

apollo

graphql

apollo-link-state