Data source integration in GraphQL - Time & Space Complexity
When connecting GraphQL to a data source, it is important to understand how the time to get data grows as the data size increases.
We want to know how the work done changes when the data source has more records.
Analyze the time complexity of the following GraphQL resolver fetching data from a database.
query GetUsers {
users {
id
name
posts {
id
title
}
}
}
This query fetches all users and their posts from the data source.
Look for repeated data fetching or loops in the resolver process.
- Primary operation: Fetching each user and then fetching their posts.
- How many times: Once for all users, plus once per user for posts.
As the number of users grows, the number of operations grows because we fetch posts for each user.
| Input Size (n users) | Approx. Operations |
|---|---|
| 10 | Fetch users once + 10 fetches for posts |
| 100 | Fetch users once + 100 fetches for posts |
| 1000 | Fetch users once + 1000 fetches for posts |
Pattern observation: The work grows roughly in proportion to the number of users.
Time Complexity: O(n)
This means the time to get all users and their posts grows linearly with the number of users.
[X] Wrong: "Fetching all users and their posts happens in constant time regardless of user count."
[OK] Correct: Each user's posts require separate fetching, so more users mean more work.
Understanding how data fetching scales helps you design efficient GraphQL queries and resolvers, a key skill in real projects.
"What if we batch fetch posts for all users in one query? How would the time complexity change?"
Practice
Solution
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.Step 2: Identify the main goal of this integration
The goal is to let GraphQL get data from these sources when a query runs.Final Answer:
To connect GraphQL queries to the actual data storage or services -> Option DQuick Check:
Data source integration = connect queries to data [OK]
- Confusing integration with UI styling
- Thinking it creates schema types automatically
- Assuming it handles data encryption
Solution
Step 1: Check how fetch works in JavaScript
fetch returns a promise; to get JSON, you call .then(res => res.json()).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.Final Answer:
const resolver = () => fetch('https://api.example.com/data').then(res => res.json()); -> Option AQuick Check:
fetch + then + json() = correct resolver [OK]
- Calling .json() directly on fetch without then()
- Not wrapping fetch in a function
- Using res.text() instead of res.json() for JSON data
const resolvers = {
Query: {
users: async () => {
const response = await fetch('https://api.example.com/users');
const data = await response.json();
return data;
}
}
};Solution
Step 1: Analyze the resolver's return value
The resolver awaits the fetch, parses JSON, and returns the data array as is.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.Final Answer:
[{"id":1,"name":"Alice"}] -> Option CQuick Check:
Returned data array = output array [OK]
- Assuming it returns a single object instead of an array
- Forgetting async/await means data is resolved
- Thinking fetch is undefined in server environment
const resolvers = {
Query: {
products: () => {
const data = db.query('SELECT * FROM products');
return data;
}
}
};Solution
Step 1: Understand db.query behavior
db.query usually returns a promise, so it must be awaited in async functions.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.Final Answer:
The resolver should be async and await the db query -> Option AQuick Check:
Async + await needed for promises [OK]
- Ignoring async/await for promises
- Assuming SQL syntax is wrong without checking
- Thinking try-catch is mandatory for correctness
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?
}
}
};Solution
Step 1: Understand data types returned
Both apiData and dbData are arrays of items fetched asynchronously.Step 2: Combine arrays before returning
Using spread syntax [...apiData, ...dbData] merges both arrays into one list.Final Answer:
Return [...apiData, ...dbData] to merge both arrays -> Option BQuick Check:
Spread arrays to combine data sources [OK]
- Returning only one data source ignoring the other
- Returning an object without merging arrays
- Forgetting to await both data sources
Ready to prove it?
Pass the test and this pattern moves unknown
