Snapshot testing queries in GraphQL - Mini Project: Build & Apply

Snapshot Testing Queries

📖 Scenario: You are working on a GraphQL API for a bookstore. You want to ensure that your queries return consistent data over time. Snapshot testing helps you capture the current output of a query and compare it automatically in future tests.

🎯 Goal: Build a simple GraphQL query and set up a snapshot test to capture its output. This will help you verify that the query results do not change unexpectedly.

📋 What You'll Learn

Create a GraphQL query named GetBooks that fetches id, title, and author fields from books.

Define a variable called snapshotName with the value BooksQuerySnapshot.

Write a function called runQuery that executes the GetBooks query.

Add a final step to save the query result to a snapshot using the snapshotName.

💡 Why This Matters

🌍 Real World

Snapshot testing is used in real projects to catch unexpected changes in API responses, ensuring frontend and backend stay in sync.

💼 Career

Understanding snapshot testing of GraphQL queries is valuable for roles in frontend development, backend API development, and quality assurance.

1

Create the GraphQL query

Write a GraphQL query called GetBooks that fetches id, title, and author fields from the books type.

GraphQL

# Write the GraphQL query 'GetBooks' here
# Your code here

Need a hint?

Use the query keyword followed by GetBooks. Inside, request the books field with id, title, and author subfields.

2

Define the snapshot name variable

Create a variable called snapshotName and set it to the string "BooksQuerySnapshot".

GraphQL

query GetBooks {
  books {
    id
    title
    author
  }
}

# Define the variable 'snapshotName' here
# Your code here

Need a hint?

Use const snapshotName = "BooksQuerySnapshot"; to define the variable.

3

Write the query execution function

Write a function called runQuery that executes the GetBooks query and returns the result. Use an async function and assume a graphqlClient object with a query method.

GraphQL

query GetBooks {
  books {
    id
    title
    author
  }
}

const snapshotName = "BooksQuerySnapshot";

# Write the async function 'runQuery' here
# Your code here

Need a hint?

Define an async function named runQuery. Inside, use await graphqlClient.query({ query: GetBooks }) and return result.data.

4

Save the query result to a snapshot

Add code to call runQuery and save its result to a snapshot using the variable snapshotName. Assume a function saveSnapshot(name, data) is available.

GraphQL

import { gql } from '@apollo/client';

const GetBooks = gql`
  query GetBooks {
    books {
      id
      title
      author
    }
  }
`;

const snapshotName = "BooksQuerySnapshot";

async function runQuery() {
  const result = await graphqlClient.query({ query: GetBooks });
  return result.data;
}

# Call runQuery and save the result to a snapshot using 'saveSnapshot(snapshotName, data)'
# Your code here

Need a hint?

Use runQuery().then(data => saveSnapshot(snapshotName, data)); to save the snapshot.