Parallel data fetching pattern in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to fetch data from two APIs in parallel using Promise.all.

NextJS

const fetchData = async () => {
  const [data1, data2] = await [1]([
    fetch('/api/data1'),
    fetch('/api/data2')
  ]);
  return [await data1.json(), await data2.json()];
};

Drag options to blanks, or click blank then click option'

APromise.resolve

BPromise.race

CPromise.then

DPromise.all

Attempts:

3 left

💡 Hint

Common Mistakes

Using Promise.race which only waits for the first promise to settle.

Using Promise.then which is not a static method and doesn't handle multiple promises.

Use Promise.all to run multiple promises in parallel and wait for all to complete.

2fill in blank

medium

Complete the code to destructure the JSON results from the fetched responses.

NextJS

const [json1, json2] = await Promise.all([
  response1.[1](),
  response2.json()
]);

Drag options to blanks, or click blank then click option'

Ajson

Btext

Cblob

DarrayBuffer

Attempts:

3 left

💡 Hint

Common Mistakes

Using text() which returns plain text, not parsed JSON.

Using blob() or arrayBuffer() which return binary data.

Use json() to parse the response body as JSON.

3fill in blank

hard

Fix the error in the code to correctly fetch and parse data in parallel.

NextJS

const [data1, data2] = await Promise.all([
  fetch('/api/data1').[1](),
  fetch('/api/data2').[2]()
]);

Drag options to blanks, or click blank then click option'

Atext

Bthen

Cjson

Dblob

Attempts:

3 left

💡 Hint

Common Mistakes

Calling json() on the fetch promise instead of the Response object.

Mixing fetch and json calls incorrectly.

Each fetch returns a Response object. You must call json() on it to parse the JSON.

4fill in blank

hard

Fill both blanks to create a React component that fetches data in parallel and displays it.

NextJS

import React, { useState, useEffect } from 'react';

export default function DataComponent() {
  const [data, setData] = useState(null);

  useEffect(() => {
    async function fetchData() {
      const [res1, res2] = await Promise.all([
        fetch('/api/data1'),
        fetch('/api/data2')
      ]);
      const [json1, json2] = await Promise.all([
        res1.[1](),
        res2.[2]()
      ]);
      setData({ json1, json2 });
    }
    fetchData();
  }, []);

  if (!data) return <p>Loading...</p>;
  return <div>{JSON.stringify(data)}</div>;
}

Drag options to blanks, or click blank then click option'

Ajson

Btext

Cblob

DarrayBuffer

Attempts:

3 left

💡 Hint

Common Mistakes

Using different parsing methods for each response.

Forgetting to parse the response before setting state.

Both responses must be parsed as JSON using json() before using the data.

5fill in blank

hard

Fill all three blanks to create a Next.js server component that fetches two APIs in parallel and returns combined data.

NextJS

export default async function Page() {
  const [data1, data2] = await Promise.all([
    fetch('/api/data1', { cache: '[1]' }),
    fetch('/api/data2', { cache: '[2]' })
  ]).then(responses => Promise.all(responses.map(res => res.[3]())));

  return (
    <main>
      <h1>Data</h1>
      <pre>{JSON.stringify({ data1, data2 }, null, 2)}</pre>
    </main>
  );
}

Drag options to blanks, or click blank then click option'

Ano-store

Bforce-cache

Cjson

Dreload

Attempts:

3 left

💡 Hint

Common Mistakes

Using inconsistent cache options causing stale data.

Not parsing the responses before rendering.

Use no-store to disable caching for fresh data. Parse responses with json().