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

Posted 2023-03-10

【中文标题】GraphQL Schema 上的计算字段或使用 Apollo 客户端查询

【英文标题】：Computed fields on a GraphQL Schema or Query with Apollo Client

【发布时间】：2019-09-28 02:21:09

【问题描述】：

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

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

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

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

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

【参考方案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 字段不会扩展到适当的服务器端字段集。