Я получаю ошибку GraphQL при выполнении этого запроса с использованием сервера apollo.Кто-нибудь знает, в чем проблема?

Question

Я пытаюсь получить некоторые данные из GitHub GraphQL, но я получаю GaphQLError. Я пробовал тот же запрос в разделе разработчика GitHub, и он работает. Кто-нибудь знает в чем проблема с этим?

issueQuery = gql`
        query search(first: 10, type: ISSUE, query: "repo:angular/angular is:issue state:open") {
          issueCount
          edges {
            node {
              ... on Issue {
                createdAt
                title
                body
                url
                comments(first: 10) {
                  nodes {
                    body
                  }
                }
              }
            }
          }
        }
      `;

Трассировка стека ошибок:

"GraphQLError: Syntax Error: Expected $, found Name "first"
    at syntaxError (http://localhost:4200/vendor.js:70270:10)
    at expect (http://localhost:4200/vendor.js:75154:67)
    at parseVariable (http://localhost:4200/vendor.js:73984:3)
    at parseVariableDefinition (http://localhost:4200/vendor.js:73970:15)
    at many (http://localhost:4200/vendor.js:75222:16)
    at parseVariableDefinitions (http://localhost:4200/vendor.js:73959:82)
    at parseOperationDefinition (http://localhost:4200/vendor.js:73926:26)
    at parseExecutableDefinition (http://localhost:4200/vendor.js:73881:16)
    at parseDefinition (http://localhost:4200/vendor.js:73845:16)
    at many (http://localhost:4200/vendor.js:75222:16)"

Новая трассировка стека ошибок при добавлении $ перед параметрами:

"GraphQLError: Syntax Error: Expected Name, found Int "10"
    at syntaxError (http://localhost:4200/vendor.js:70270:10)
    at expect (http://localhost:4200/vendor.js:75154:67)
    at parseName (http://localhost:4200/vendor.js:73809:15)
    at parseNamedType (http://localhost:4200/vendor.js:74385:11)
    at parseTypeReference (http://localhost:4200/vendor.js:74364:12)
    at parseVariableDefinition (http://localhost:4200/vendor.js:73971:83)
    at many (http://localhost:4200/vendor.js:75222:16)
    at parseVariableDefinitions (http://localhost:4200/vendor.js:73959:82)
    at parseOperationDefinition (http://localhost:4200/vendor.js:73926:26)
    at parseExecutableDefinition (http://localhost:4200/vendor.js:73881:16)"

Answer 1

Не путайте операцию с фактическим запрашиваемым полем. Синтаксис должен выглядеть следующим образом:

operationType [operationName] [variableDefinitions] {
  selectionSet
}

, где operationType - это одно из query, mutation или subscription, operationName - произвольное имя для вашей операции, используемой при отладке, variableDefinitions - определения типов для любых переменных, на которые вы ссылаетесь внутри операции. и selectionSet - это одно или несколько полей, которые вы на самом деле запрашиваете.

В этом случае search - это поле, которое мы запрашиваем, поэтому оно не должно обрабатываться ключевым словом query. Это работает нормально, если вы аутентифицированы:

query OptionalName {
  search(first: 10, type: ISSUE, query: "repo:angular/angular is:issue state:open") {
    issueCount
    edges {
      # more fields
    }
  }
}

Если тип операции query, вы можете вообще пропустить ключевое слово query. Это называется «стенограммой запроса»:

{
  search(first: 10, type: ISSUE, query: "repo:angular/angular is:issue state:open") {
    issueCount
    edges {
      # more fields
    }
  }
}

Если вы используете переменные, определите их в скобках рядом с вашей операцией. Имена переменных являются произвольными, но по соглашению мы используем имена полей ввода, они будут использоваться в:

query OptionalName ($first: Int, type: SearchType!, $query: String! ) {
  search(first: $first, type: $type, query: $query) {
    issueCount
    edges {
      # more fields
    }
  }
}