在将查询发送到 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 调用每个翻译。我们需要的是累积所有翻译，然后执行一个 GraphQL 查询。基本上，我们希望使用一个接受键列表但仍使用专用翻译组件的查询：

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

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

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

Answer 1

是的，有一个简单的方法

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

您可以在此处阅读有关"GraphQL - 列表和非空"的更多信息

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

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

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

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

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