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

Question

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

Ideally, we would like the Apollo cache to be the single source of truth for all data in our client application.

如何在 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（非强制性）和 resolvers。

因此您的 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;
    },

任何使用本地应用程序状态的组件都将在它们正在使用的应用状态部分发生任何更改时更新。

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

External state management with Apollo client?

javascript

apollo

react-apollo

apollo-client