Data source integration in GraphQL - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ query_result

intermediate

Querying a REST API data source

You have a GraphQL server that integrates a REST API providing user data. The REST API returns a list of users with fields id, name, and email. Which GraphQL query will correctly fetch the name and email of all users?

A { users { name email } }

B { users { id name email } }

C { users { username email } }

D { userList { name email } }

💡 Hint

Focus on the exact field names defined in the GraphQL schema for the REST API data.

The GraphQL query must match the schema fields exactly. The field users returns the list, and name and email are valid fields. Option A correctly queries these fields.

🧠 Conceptual

intermediate

Understanding GraphQL data source resolvers

In GraphQL, what is the main role of a resolver function when integrating an external data source like a database or REST API?

A It defines the schema types and fields for the data source.

B It fetches and returns the data for a specific field when queried.

C It validates the GraphQL query syntax before execution.

D It caches the entire data source to improve performance.

💡 Hint

Think about what happens when a GraphQL query asks for data.

Resolvers are functions that run when a field is requested in a query. They fetch and return the data from the connected data source.

📝 Syntax

advanced

Fixing a GraphQL schema integration error

Given this GraphQL schema snippet integrating a SQL database, which option correctly fixes the syntax error?

type Query {
  getUser(id: ID!): User
}

type User {
  id: ID!
  name: String
  email: String
}

A Add a resolver for getUser that accepts an argument and returns a User object.

B Remove the exclamation mark from <code>ID!</code> to make it optional.

C Change <code>getUser(id: ID!)</code> to <code>getUser: User</code> without arguments.

D Rename the type <code>User</code> to <code>Users</code> to match the database table.

💡 Hint

Consider what is needed to connect the schema to the data source properly.

The schema is correct, but to integrate with a SQL database, you must provide a resolver function for getUser that takes the id argument and returns the matching User. Other options either break the schema or do not fix the integration.

❓ optimization

advanced

Optimizing GraphQL data fetching from multiple sources

You have a GraphQL query that fetches user info from a REST API and order info from a SQL database. The current implementation makes separate calls for each user to fetch their orders, causing slow response times. What is the best optimization approach?

A Remove the order info from the query to speed up the response.

B Use multiple parallel calls for each user’s orders without batching.

C Cache the REST API responses indefinitely to avoid repeated calls.

D Batch the order requests by collecting all user IDs and fetching orders in a single query.

💡 Hint

Think about reducing the number of calls to the database.

Batching requests reduces the number of calls by fetching all needed orders in one query, improving performance. Caching indefinitely may cause stale data, removing data reduces functionality, and parallel calls still cause many requests.

🔧 Debug

expert

Debugging a GraphQL data source integration error

A GraphQL query to fetch products from a MongoDB data source returns null for the price field, but other fields like name and category return correctly. What is the most likely cause?

A The GraphQL schema does not define the <code>price</code> field in the <code>Product</code> type.

B The MongoDB collection does not contain the <code>price</code> field in documents.

C The resolver for <code>price</code> is missing or returns <code>null</code>.

D The query is missing the <code>price</code> field in the selection set.

💡 Hint

Check how each field gets its data from the database.

If other fields return correctly but price is always null, it usually means the resolver for price is missing or incorrectly implemented. The schema and query include price, and the database has the field, so the resolver is the issue.

Practice

1. What is the main purpose of data source integration in GraphQL?

easy

A. To style the GraphQL interface for better user experience

B. To encrypt data sent over the network

C. To create new GraphQL schema types automatically

D. To connect GraphQL queries to the actual data storage or services

Solution

1. Step 1: Understand what data source integration means

   It means linking GraphQL queries to where data is stored or fetched from, like databases or APIs.

2. Step 2: Identify the main goal of this integration

   The goal is to let GraphQL get data from these sources when a query runs.

3. Final Answer:

   To connect GraphQL queries to the actual data storage or services -> Option D

4. Quick Check:

   Data source integration = connect queries to data [OK]

Hint: Think: GraphQL needs to reach data somewhere [OK]

Common Mistakes:

• Confusing integration with UI styling
• Thinking it creates schema types automatically
• Assuming it handles data encryption

2. Which of the following is the correct way to define a resolver that fetches data from a REST API in GraphQL?

easy

A. const resolver = () => fetch('https://api.example.com/data').then(res => res.json());

B. const resolver = fetch('https://api.example.com/data').json();

C. const resolver = () => fetch('https://api.example.com/data').json();

D. const resolver = () => fetch('https://api.example.com/data').then(res => res.text());

Solution

1. Step 1: Check how fetch works in JavaScript

   fetch returns a promise; to get JSON, you call .then(res => res.json()).

2. Step 2: Verify the resolver syntax

   const resolver = () => fetch('https://api.example.com/data').then(res => res.json()); correctly returns a function that fetches and parses JSON asynchronously.

3. Final Answer:

   const resolver = () => fetch('https://api.example.com/data').then(res => res.json()); -> Option A

4. Quick Check:

   fetch + then + json() = correct resolver [OK]

Hint: Remember fetch returns a promise; use then() to parse JSON [OK]

Common Mistakes:

• Calling .json() directly on fetch without then()
• Not wrapping fetch in a function
• Using res.text() instead of res.json() for JSON data

3. Given this resolver code snippet, what will be the output of the GraphQL query if the API returns [{"id":1,"name":"Alice"}]?

const resolvers = {
  Query: {
    users: async () => {
      const response = await fetch('https://api.example.com/users');
      const data = await response.json();
      return data;
    }
  }
};

medium

A. undefined

B. {"id":1,"name":"Alice"}

C. [{"id":1,"name":"Alice"}]

D. Error: fetch is not defined

Solution

1. Step 1: Analyze the resolver's return value

   The resolver awaits the fetch, parses JSON, and returns the data array as is.

2. Step 2: Match the returned data with the query output

   The API returns an array with one user object, so the query returns the same array.

3. Final Answer:

   [{"id":1,"name":"Alice"}] -> Option C

4. Quick Check:

   Returned data array = output array [OK]

Hint: Async resolver returns exactly what API sends after parsing [OK]

Common Mistakes:

• Assuming it returns a single object instead of an array
• Forgetting async/await means data is resolved
• Thinking fetch is undefined in server environment

4. Identify the error in this resolver code that fetches data from a database:

const resolvers = {
  Query: {
    products: () => {
      const data = db.query('SELECT * FROM products');
      return data;
    }
  }
};

medium

A. The resolver should be async and await the db query

B. The query string is incorrect SQL syntax

C. The resolver should return a promise, not data

D. The resolver is missing a try-catch block

Solution

1. Step 1: Understand db.query behavior

   db.query usually returns a promise, so it must be awaited in async functions.

2. Step 2: Check resolver function signature

   The resolver is not async and does not await the promise, so it returns a pending promise instead of data.

3. Final Answer:

   The resolver should be async and await the db query -> Option A

4. Quick Check:

   Async + await needed for promises [OK]

Hint: If db query returns promise, resolver must be async and await it [OK]

Common Mistakes:

• Ignoring async/await for promises
• Assuming SQL syntax is wrong without checking
• Thinking try-catch is mandatory for correctness

5. You want to integrate two data sources in a GraphQL resolver: a REST API and a SQL database. Which approach correctly combines data from both sources before returning it?

const resolvers = {
  Query: {
    combinedData: async () => {
      const apiData = await fetch('https://api.example.com/items').then(res => res.json());
      const dbData = await db.query('SELECT * FROM items');
      // What next?
    }
  }
};

hard

A. Return {apiData, dbData} as an object without merging

B. Return [...apiData, ...dbData] to merge both arrays

C. Return dbData only, ignoring apiData

D. Return apiData only, ignoring dbData

Solution

1. Step 1: Understand data types returned

   Both apiData and dbData are arrays of items fetched asynchronously.

2. Step 2: Combine arrays before returning

   Using spread syntax [...apiData, ...dbData] merges both arrays into one list.

3. Final Answer:

   Return [...apiData, ...dbData] to merge both arrays -> Option B

4. Quick Check:

   Spread arrays to combine data sources [OK]

Hint: Use spread operator to merge arrays from multiple sources [OK]

Common Mistakes:

• Returning only one data source ignoring the other
• Returning an object without merging arrays
• Forgetting to await both data sources