Loader functions for data fetching in Remix - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to export a loader function that returns JSON data.

Remix

export async function loader() {
  return [1]({ message: "Hello from loader" });
}

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

Aconsole.log

Bfetch

Cjson

DuseLoaderData

Attempts:

3 left

💡 Hint

Common Mistakes

Using fetch inside the loader without returning a response.

Trying to use useLoaderData inside the loader function.

The json function from Remix is used to return JSON responses from loader functions.

2fill in blank

medium

Complete the code to import the correct Remix function for returning JSON in a loader.

Remix

import { [1] } from "@remix-run/node";

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

AuseLoaderData

Bredirect

CLoaderFunction

Djson

Attempts:

3 left

💡 Hint

Common Mistakes

Importing useLoaderData which is a React hook, not a loader helper.

Importing redirect which is for navigation, not data.

The json function is imported from @remix-run/node to return JSON responses in loader functions.

3fill in blank

hard

Fix the error in the loader function to correctly fetch and return JSON data.

Remix

export async function loader() {
  const response = await fetch("https://api.example.com/data");
  const data = await response.json();
  return [1](data);
}

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

AuseLoaderData

Bjson

Cconsole.log

Dredirect

Attempts:

3 left

💡 Hint

Common Mistakes

Returning raw data without wrapping it in json.

Using console.log instead of returning data.

The loader must return data wrapped with the json function to send a proper JSON response.

4fill in blank

hard

Fill both blanks to create a loader that fetches data and returns it as JSON.

Remix

import { [1] } from "@remix-run/node";

export async function loader() {
  const res = await fetch("https://api.example.com/items");
  const items = await res.json();
  return [2](items);
}

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

Ajson

Bredirect

CuseLoaderData

DLoaderFunction

Attempts:

3 left

💡 Hint

Common Mistakes

Importing useLoaderData instead of json.

Returning data without wrapping in json.

Both blanks use the json function: one to import it, one to return data wrapped in it.

5fill in blank

hard

Fill all three blanks to create a loader that fetches user data, checks status, and returns JSON.

Remix

import { [1] } from "@remix-run/node";

export async function loader() {
  const response = await fetch("https://api.example.com/user");
  if (!response.ok) {
    throw new Response("Not Found", { status: 404 });
  }
  const user = await response.json();
  return [2]({ user: [3] });
}

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

Ajson

Buser

Cuser.name

Dredirect

Attempts:

3 left

💡 Hint

Common Mistakes

Using redirect instead of json.

Passing user.name instead of the full user object.

The json function is imported and used to return the data. The user object is passed inside the JSON response.