⬡ GraphQL Intermediate

What is graphql-tag and DocumentNode?

Answer

graphql-tag (imported as gql) is a template literal tag that parses GraphQL query strings into DocumentNode objects — the AST (Abstract Syntax Tree) representation that GraphQL clients like Apollo use internally. Instead of sending raw strings, you write: const GET_USER = gql`{ user(id: $id) { name } }`. The parsing happens once (at import time with module bundlers), not per request. DocumentNode is the TypeScript type from the graphql package representing a parsed GraphQL document. Using gql enables static analysis, syntax highlighting in IDEs with the GraphQL extension, and type generation with GraphQL Code Generator.