使用 Apollo 客户端进行外部状态管理

Question

我看到很多人在Apollo客户端中使用redux和mobx。但是，在阅读文档后，它提到您可能不需要这个：

理想情况下，我们希望 Apollo 缓存成为客户端应用程序中所有数据的单一事实来源。

如何在阿波罗客户端中共享全局状态？mobx或redux真的有必要吗？

Answer 1

根本不需要 mobx 或 redux。

Apollo-link-state 足以管理本地应用状态，并成为数据的单一事实来源。

import {withClientState} from 'apollo-link-state'
import typeDefs from '../schema/schema'
import resolvers from '../resolvers'
const initialState = {
  intialData: [],
 myData: {
    __typename: 'MyDataType',
  },
}
async function getLocalLinkState(cache) {
  const stateLink = withClientState({
    cache,
    defaults: initialState,
    resolvers: resolvers,
    typeDefs
  })
  return stateLink
}
export default getLocalLinkState

基本上，您创建与graphql服务器相似的typedefs（不是强制性的）和解析器。

因此，您的initialState将共享为全局状态，您可以使用客户端查询和客户端突变读取或写入该状态。

这些客户端查询和更改将由客户端解析器而不是服务器端解析器解析（如果您已使用@client）

客户端查询：

const query = gql`
{
  counter @client
}
`;

突变解析器示例

decrementCounter: (_, params, { cache }) => {
      const { counter } = cache.readQuery({ query });
      const nextCounter = counter - 1;
      const data = {
        counter: nextCounter,
      };
      cache.writeData({ data });
      return nextCounter;
    },
    incrementCounter: (_, params, { cache }) => {
      const { counter } = cache.readQuery({ query });
      const nextCounter = counter + 1;
      const data = {
        counter: nextCounter,
      };
      cache.writeData({ data });
      return nextCounter;
    },

如果使用本地应用

状态的部分发生任何更改，则使用本地应用状态的任何组件都将更新。