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 Server执行查询：

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 - 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!
}

在将查询发送到GraphQL

1 个答案:

是的，有一种简单的方法