在将查询发送到 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 调用每个翻译。我们需要的是累积所有翻译，然后执行 ONE 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: String! 的单个 key，例如 $keys: [String!]!

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

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

如果您只执行一次 API 调用并期望得到一个 Translation，它应该如下所示：

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

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