typescript - 在将查询发送到 GraphQL 之前对其进行操作

Question

我们使用 apollo-client 和 apollo-server-express 从简单的翻译 API 获取数据。

这是当前的模式:

type Query {
    translations(language: String!, key: String!): Translation!
}

type Translation {
    key: String!
    value: String!
}

解析器:

export default {
  Query: {
    translations (obj, args, context, info) {
      return fetchApi('/api/v1/translation', {
        method: 'POST',
        body: JSON.stringify(args)
      })
    }
  }
}

在前端应用程序中，我们有一个 React 组件，它接收 props 中的翻译键，然后对 GraphQL 服务器执行查询:

const translationQuery = gql`
query GetTranslations($language: String!, $key: String!) {
  translations(language: $language, key: $key) {
    value
    key
  }
}`

现在这导致 GraphQL 调用 EACH 翻译。我们需要的是累积所有翻译，然后执行一个 GraphQL 查询。基本上我们想使用一个接受键列表但仍然使用专用翻译组件的查询:

type Query {
    translations(language: String!, keys: [String!]!): Translation!
}

type Translation {
    key: String!
    value: String!
}

有没有办法实现我们所需要的？

这是翻译组件如何在前端应用程序中实现的简化版本: https://codesandbox.io/s/81n874zjp0

Answer 1

是的，有一个简单的方法

可以将数组作为参数传递给查询。

您可以阅读更多关于 "GraphQL - Lists and Non-Null" here 的信息

在您的查询操作中，而不是单个 key定义为 $key: String!您可以像这样传入一个不可空键数组 $keys: [String!]!

您还需要更新解析器函数以处理键数组并返回一个 Translation或 Translation 的数组.

最后，确保更新您的架构。

如果您只执行一次 API 调用并希望获得单个 Translation ，它应该看起来像这样:

type Query {
    translations(language: String!, keys: [String!]!): Translation!
}

type Translation {
    key: String!
    value: String!
}