Question

我有一个GraphQL查询，该查询返回两个字段titleDe和titleFr，以两种不同的语言表示帖子的标题。

我想在客户端设置第三个字段（大概定义了本地状态），以将当前语言的标题存储在title中。然后，我的应用程序应该始终只能调用title并以当前语言获得标题。

在Apollo（本地状态）或GraphQL中是否存在等效的计算字段，这将允许我调用title，后者检查在Apollo本地状态中全局设置的语言环境（因此是另一个查询），然后返回{ {1}}或titleDe基于此？

我对GraphQL和Apollo的工作还不多。我知道如何在其他地方州经理中解决这个问题NgRx，Vuex，Redux具有吸气剂/选择器的概念。

我的目标是从我的应用程序组件中抽象titleDe / Fr逻辑，因此它们不需要具有所有语言属性的模型，而只能调用简化的titleFr属性，该属性将返回正确的字符串基于全局设置的区域设置。

Answer 1

您可以使用Apollo本地状态轻松添加其他字段。来自docs：

本地解析器与远程解析器非常相似。 Apollo Client不会将您的GraphQL查询发送到远程GraphQL端点，该端点随后针对您的查询运行解析器函数以填充并返回结果集，而是针对所有标有@client指令的字段运行本地定义的解析器函数。

这是一个简单的例子：

const GET_LOCALE = gql`
  query GetLocale {
    locale @client
  }
`;

const client = new ApolloClient({
  cache,
  link,
  resolvers: {
    Article: { // or whatever your actual type is called
      title: (article, _args, { cache }) => {
        const { locale } = cache.readQuery({ query: GET_LOCALE });
        switch (locale) {
          case 'de': return article.titleDe
          case 'fr': return article.titleFr
        }
      },
    },
  },
});

// Initialize the cache after creating it
cache.writeData({
  data: {
    locale: getPreferenceOrProvideDefault(),
  },
});

在这里，我们也将locale存储在本地状态，并使用readQuery将其提取到我们的解析器中。但是，您也可以直接从其他地方（例如localStorage）获取偏好设置。

请注意，您仍然需要在查询时请求这些字段-即，您的title字段将不会扩展为适当的服务器端字段集。

GraphQL架构或Apollo Client查询上的计算字段

1 个答案: