Question

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

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

一个人如何在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;
    },

任何消耗本地应用程序状态的组件都将在其消耗的部分应用程序状态发生任何变化时进行更新。

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

1 个答案: