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

Question

我想传递给服务器数组的对象 throw graphql API。

我对架构的查询：

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””

来自请求负载的 sn-p：

{"query":"query {\n 统计数据(\n modelId: \"5ca0f4afb88b3a2e006faa0d\",\n 挑选结束： [{\"end\":\"home\"},{\"end\":\"draw\"},{\"end\":\"away\"},{\"end\": \"under\",\"limit\":0.5},{\"end\":\"over\",\"limit\":0.5},{\"end\":\"under\", \"限制\":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）来简化这些调用。