How to pass array of objects to the graphql query from js client

Question

I want pass to server array of object throw graphql API.

my query on the schema:

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

my js based query on clients side:

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

but get error from graphql:

message: "Syntax Error: Expected Name, found String "end""

snippet from request payload:

{"query":"query {\n statistics(\n modelId: \"5ca0f4afb88b3a2e006faa0d\",\n picksEnds: [{\"end\":\"home\"},{\"end\":\"draw\"},{\"end\":\"away\"},{\"end\":\"under\",\"limit\":0.5},{\"end\":\"over\",\"limit\":0.5},{\"end\":\"under\",\"limit\":1.5 ...

This is unrelated to the error you are seeing, but if you're not already, make sure you are using an input object type for field argument types. Using a regular object type like `PickEnd` will result in a validation error. See [this question](https://stackoverflow.com/questions/45806368/graphql-error-field-type-must-be-input-type-but-got) for additional details. — Daniel Rearden, May 03 '19 at 11:47

Daniel Rearden · Accepted Answer · 2019-05-03T11:49:58.557

While GraphQL syntax is similar to JSON, you cannot use JSON inside a GraphQL document, which is what you're doing by calling JSON.stringify and then inserting the result into your template string.

What GraphQL expects:

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

What using stringify does:

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

Since this syntax is not valid, an error is thrown. The easiest way to get around this issue is to utilize variables to provide the needed input, since variable values are provided as JSON.

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

You can then construct a JavaScript object for the variables and pass it along to fetch, axios or whatever you're using to make your request. For example:

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 }),
})

Ideally, you'd want to use an existing client like Apollo to make these calls easier.

I'm doing fine without heavy clients like apollo, totally unecessary — PositiveGuy, Oct 27 '20 at 02:46

How to pass array of objects to the graphql query from js client

1 Answers1