webentwicklung-frage-antwort-db.com.de

GraphQL gql-Syntaxfehler: Erwarteter Name, gefunden}

Ich versuche, die Apollo GraphQL-Unterstützung in einem neuen React Projekt einzurichten, aber wenn ich versuche, eine Abfrage mit gql zu kompilieren, erhalte ich weiterhin die Fehlermeldung:

Syntax Error: Expected Name, found }

Dies wird durch den folgenden Code generiert:

import gql from 'graphql-tag'

const query = gql`
    {
      user(id: 5) {
        firstName
        lastName
      }
    }
  `

console.log(query)

Ich stütze diesen Code auf den Beispielcode, der hier zu finden ist: https://github.com/apollographql/graphql-tag

Was ist das Name, auf das in der Fehlermeldung verwiesen wird? Weiß jemand, was ich hier falsch mache?

9
Nathan

Ich bin mir nicht hundertprozentig sicher, wo die Ursache meines Problems liegt, aber das Verschieben des gesamten Abfragecodes in ein separates es6-Modul hat das Problem behoben. Es muss eine Art Verschmutzung durch den Umgebungscode gegeben haben. Als Referenz wurde meine Abfrage in eine React - Komponente eingebettet.

Das funktioniert:

import gql from 'graphql-tag'

const query = gql`
{
  user(id: 5) {
    firstName
    lastName
  }
}
`

export default query
3
Nathan

Dieser Fehler tritt meistens auf, wenn nicht geschlossene geschweifte Klammern vorhanden sind oder wenn einige Felder beim Aufrufen der Abfrage nicht richtig definiert sind.

16

Ich habe die akzeptierte Antwort gefunden, um mein Problem nicht zu lösen. Was ich als funktionierend empfand, war, wenn Sie die anfänglichen geschweiften Klammern entfernen. Die Abfrage sollte stattdessen so aussehen:

const query=gql`
  user(id: 5) {
    firstName
    lastName
  }
`
4
Joseph Lin

Eine weitere Ursache für diesen Fehler: Sie verweisen auf einen weiter unten definierten Typ. Verschieben Sie den Typ, auf den Sie verweisen, nach oben.

Beispielsweise:

    type Launch {
        rocket: Rocket
    }

    type Rocket {
        name: String
    }

wird einen Fehler auslösen, da Launch auf Rocket verweist, bevor Rocket definiert wird.

Der korrigierte Code:

    type Rocket {
        name: String
    }

    type Launch {
        rocket: Rocket
    }
2
ginna