Why deployment target shapes architecture in Remix - Test Your Understanding

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a Remix loader function that fetches data.

Remix

export async function loader({ request }) {
  const data = await fetch([1]);
  return data.json();
}

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

A'/api/data'

B'/styles/main.css'

C'/favicon.ico'

D'/images/logo.png'

Attempts:

3 left

💡 Hint

Common Mistakes

Using a static asset URL instead of an API endpoint.

Forgetting to await the fetch call.

The loader function fetches data from an API endpoint, so the URL should point to '/api/data'.

2fill in blank

medium

Complete the code to export a Remix action function that handles form submission.

Remix

export async function action({ request }) {
  const formData = await request.[1]();
  // process formData
}

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

Atext

BformData

Cjson

Dblob

Attempts:

3 left

💡 Hint

Common Mistakes

Using request.json() instead of request.formData().

Not awaiting the formData call.

The action function processes form submissions, so it uses request.formData() to get the form data.

3fill in blank

hard

Fix the error in the Remix route component by correctly importing the useLoaderData hook.

Remix

import { [1] } from '@remix-run/react';

export default function RouteComponent() {
  const data = useLoaderData();
  return <div>{data.message}</div>;
}

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

AuseRouteData

BuseActionData

CuseLoaderData

DuseData

Attempts:

3 left

💡 Hint

Common Mistakes

Importing useActionData instead of useLoaderData.

Using a non-existent hook like useRouteData.

The hook to access loader data in Remix is useLoaderData from '@remix-run/react'.

4fill in blank

hard

Fill both blanks to create a Remix route that uses a loader and returns JSON response.

Remix

import { json } from '@remix-run/node';

export async function loader() {
  const data = await fetch('/api/info');
  const jsonData = await data.[1]();
  return [2](jsonData);
}

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

Ajson

Btext

Dredirect

Attempts:

3 left

💡 Hint

Common Mistakes

Parsing response incorrectly or returning raw fetch response.

Using redirect instead of json for data response.

First, we parse the fetch response as JSON, then wrap it with Remix's json() to return a JSON response.

5fill in blank

hard

Fill all three blanks to define a Remix route with loader, action, and default component.

Remix

import { json } from '@remix-run/node';
import { useLoaderData } from '@remix-run/react';

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

export async function action({ request }) {
  const form = await request.[2]();
  const name = form.get('name');
  return [3]({ greeting: `Hello, ${name}` });
}

export default function Greeting() {
  const data = useLoaderData();
  return <div>{data.message}</div>;
}

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

Ajson

BformData

Dtext

Attempts:

3 left

💡 Hint

Common Mistakes

Using text() instead of json() for responses.

Not awaiting request.formData() in action.

The loader returns JSON using Remix's json(). The action reads formData and returns JSON greeting.