запрос graphql с fetch, выдающий 400 неверных запросов

Question

Я пытаюсь написать базовый запрос c graphql с fetch, который работает при использовании клиента apollo. Но он не работает с извлечением узла.

Определения типов выглядят так:

type Query {
  findLeadStat(print: PrintInput!): LeadStatWithPrint
}

input PrintInput {
  printa: String!
  service: String
}

type LeadStatWithPrint {
  answered: Int!
  printa: String!
  service: String
}

Это запрос извлечения узла:

const fetch = require('node-fetch');

( async () => {    
    const uri = `http://localhost:3000/graphql/v1`;

    const query = `
        query findLeadStat(print: PrintInput!) {
          findLeadStat(print: $print){
            answered
            printa
            service
          }
        } 
    `;

    // I also tried add a query: key inside data object
    const data = {
            print: {
                printa: "62f69234a7901e3659bf67ea2f1a758d",
                service: "abc"
              }
    }

    const response = await fetch(uri, {
        method: 'post',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({query, data})
    });

    console.log('and the resp: ', response);
})()

Это дает мне:

url: 'http://localhost:3000/graphql/v1',
status: 400,
statusText: 'Bad Request',

Работает в Apollo GraphQL Client. Почему это не работает с fetch?

Поэтому, когда я использовал asyn c с ожиданием при извлечении узла, ответ был практически бесполезным. Он просто говорил мне, что произошла ошибка 400 неверных запросов, а затем дал мне этот длинный объект свойств, ни один из которых не содержал фактического сообщения об ошибке.

Но когда я изменил вызов выборки на этот:

const response = await fetch(uri, {
    method: 'post',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ query, variables}) // same as query: query, variables: variables
})
.then(res => res.json())
.then(json => console.log(json))
.catch(err => console.error('ERROR: ', err));

Здесь две строки:

.then(res => res.json())
.then(json => console.log(json))

прояснили, в чем проблема:

{
  errors: [
    {
      message: 'Syntax Error: Expected $, found Name "fingeprint"',
      locations: [Array],
      extensions: [Object]
    }
  ]
}

Похоже, что выборка узла имеет два асинхронных c события происходящее и поэтому ожидание пришлось использовать дважды:

const response = await fetch(uri, {
    method: 'post',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ query, variables}) // same as query: query, variables: variables
})

console.log('and the resp: ', await response.json());

Answer 1

Статус 400 указывает на то, что ваш запрос недействителен или искажен. Когда это происходит, в ответ включается тело JSON с массивом errors, которое можно проверить, чтобы точно определить, что именно пошло не так.

В этом конкретном случае проблема заключается в том, что ваш запрос содержит не -nullable переменная ($print), но эта переменная не была предоставлена ​​вместе с запросом.

При выполнении запроса GraphQL тело запроса должно быть объектом JSON со свойством query и двумя другими необязательные свойства - variables и operationName. operationName используется для определения, какую операцию выполнить, если в предоставленный документ было включено несколько операций (свойство query). Любые ненулевые переменные, определенные в выполненной операции, должны быть включены как свойства в свойство variables, которое также является объектом. Обнуляемые свойства могут быть вообще опущены.

Другими словами, вам нужно изменить свойство data в вашем запросе на variables, чтобы сервер мог распознать, что переменная была предоставлена ​​в запросе.