Exploring GraphQL

GraphiQL Interface

GraphiQL is an interactive IDE for writing and testing GraphQL queries. Access it at:

http://localhost:4000/graphiql

The interface has three main areas:

• Left panel: Write your queries
• Center panel: View results
• Right panel: Documentation explorer (click "Docs" button)

Schema Explorer

Click the Docs button in the top-right corner to open the Documentation Explorer. This shows you:

• All available queries (entry points)
• Types and their fields
• Field arguments and return types

Every type and field is clickable, letting you drill down into the schema.

Writing Queries

Basic Query Structure

GraphQL queries specify exactly which fields you want:

query {
  version
}

The query keyword is optional for simple queries:

{
  version
}

Nested Fields

When querying objects, specify which nested fields to include:

query {
  allContentfulProducts {
    name
    price
    description
  }
}

Query Arguments

Some fields accept arguments to filter or customize results:

query {
  contentfulProduct(slug: "my-product") {
    name
    price
  }
}

Using Variables

Variables make queries reusable. Define them in the query signature and pass values separately:

query GetProduct($slug: String!) {
  contentfulProduct(slug: $slug) {
    name
    price
  }
}

In GraphiQL, enter variable values in the "Query Variables" panel at the bottom:

{
  "slug": "my-product"
}

The $slug: String! syntax means:

• $slug - variable name (referenced as $slug in the query)
• String - the GraphQL type
• ! - required (non-nullable)

Field Aliases

Give fields custom names in the response:

query {
  featured: contentfulProduct(slug: "featured-item") {
    name
  }
  latest: contentfulProduct(slug: "latest-item") {
    name
  }
}

This returns:

{
  "data": {
    "featured": { "name": "Featured Product" },
    "latest": { "name": "Latest Product" }
  }
}

Next Steps

• Using Plugins - Add data sources like Contentful
• Querying Data - Learn query patterns for your data