如何从 js 客户端将对象数组传递给 graphql 查询

Question

我想传递给服务器数组的对象抛出graphqlAPI。

我对架构的查询：

export const schema = buildSchema(`
  type Query {
    statistics(
      modelId: String
      picksEnds: [PickEnd]        
    )
  }: Statistics
  type PickEnd {
    end: String
    limit: float
  } 
  ...
`)

我在客户端基于 js 的查询：

 const createStatisticsQuery = (...) => {
     return `query {
             statistics(
               modelId: "${modelId}", 
               picksEnds: ${JSON.stringify(myEnds)}
             ) ...

但出现错误graphql：

消息：“语法错误：预期名称，找到字符串“end””

请求负载中的片段：

{"query":"查询 {\n 统计信息(\n modelId: \"5ca0f4afb88b3a2e006faa0d\",\n picksEnds: [{\"end\":\"home\"},{\"end\":\"绘制\"},{\"end\":\"away\"},{\"end\":\"under\",\"limit\":0.5},{\"end\":\"超过\",\"限制\":0.5},{\"结束\":\"低于\",\"限制\":1.5 ...

Answer 1

虽然 GraphQL 语法与 JSON 类似，但您不能在 GraphQL 文档中使用 JSON，这是您通过调用JSON.stringify然后将结果插入模板字符串来执行的操作。

GraphQL 的期望：

[{end:"foo",limit:2.0}]

使用的stringify作用是什么：

[{"end":"foo","limit":2.0}]

由于此语法无效，因此会引发错误。解决此问题的最简单方法是利用变量来提供所需的输入，因为变量值以 JSON 形式提供。

# Note: Replace PickEndInput with whatever your input type is actually called
query StatsQuery($id: String!, $ends: [PickEndInput!]!) {
  statistics(modelId: $id, picksEnds: $ends) {
    # ...
  }
}

然后，您可以为变量构造一个 JavaScript 对象，并将其传递给fetch或axios您用来发出请求的任何内容。例如：

const variables = {
  id: 'SOME_ID',
  ends: [
   {
     end:'foo',
     limit: 2.0,
   },
  ],
}
const query = ...
fetch('SOME_ENDPOINT_URL', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ variables, query }),
})

理想情况下，您希望使用Apollo等现有客户端来简化这些调用。