时间戳

首页 > 解决方案 > GraphQL Schema 上的计算字段或使用 Apollo 客户端查询

graphql - GraphQL Schema 上的计算字段或使用 Apollo 客户端查询

问题描述

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

我想在客户端有第三个字段（所以可能定义了本地状态）来将当前语言的标题存储在title. 然后，我的应用程序应该能够始终title只调用并获取当前语言的标题。

在 Apollo (Local State) 或 GraphQL 中是否有等效的计算字段允许我调用title，它检查在 Apollo Local State 中全局设置的区域设置（所以另一个查询）然后返回titleDe或titleFr基于它？

我还没有用 GraphQL 和 Apollo 做太多工作。我知道如何在其他本地状态管理器中解决这个问题，例如 NgRx、Vuex、Redux，使用 getter/selector 的概念。

我的目标是从我的应用程序组件中抽象出 titleDe/Fr 逻辑，因此它们不需要具有所有语言属性的模型，并且只能调用简化的title属性，它将根据全局设置的语言环境返回正确的字符串。

标签： graphqlapollo-client

解决方案

您可以使用 Apollo 本地状态轻松添加其他字段。从文档：

本地解析器与远程解析器非常相似。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字段不会扩展到适当的服务器端字段集。

推荐阅读