Resource routes for APIs in Remix - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define a resource route loader in Remix.

Remix

export const loader = async ({ [1] }) => {
  return new Response('Data loaded');
};

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

Aparams

Bcontext

Crequest

Dresponse

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'params' instead of 'request' in the loader function parameter.

Trying to access 'response' inside the loader parameter.

The loader function receives a request object representing the HTTP request.

2fill in blank

medium

Complete the code to handle a POST request in a Remix resource route action.

Remix

export const action = async ({ [1] }) => {
  const formData = await request.formData();
  return new Response('Form submitted');
};

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

Arequest

Bparams

Ccontext

Dresponse

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'params' instead of 'request' in the action function parameter.

Trying to destructure 'response' which is not passed.

The action function receives an object with the request property to access the HTTP request data.

3fill in blank

hard

Fix the error in the resource route export to correctly handle POST and PUT methods.

Remix

export const [1] = async ({ request }) => {
  if (request.method === 'POST') {
    return new Response('POST response');
  } else if (request.method === 'PUT') {
    return new Response('PUT response');
  }
};

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

Ahandle

Bloader

Cresource

Daction

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'loader' for non-GET multi-method handling which is only for GET.

Using an incorrect export name like 'resource' or 'handle'.

In Remix resource routes, the action export can be used to handle multiple non-GET HTTP methods (like POST, PUT, PATCH, DELETE) in one function by checking request.method.

4fill in blank

hard

Fill both blanks to create a resource route that returns JSON data for GET and accepts JSON in POST.

Remix

export const [1] = async ({ request }) => {
  if (request.method === 'GET') {
    return new Response(JSON.stringify({ message: 'Hello' }), { headers: { 'Content-Type': '[2]' } });
  }
};

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

Aloader

Bapplication/json

Ctext/html

Daction

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'action' instead of 'loader' for GET requests.

Setting Content-Type to 'text/html' instead of 'application/json'.

The loader handles GET requests, and the response content type for JSON is application/json.

5fill in blank

hard

Fill all three blanks to create a Remix resource route action that reads JSON from the request and returns a JSON response.

Remix

export const action = async ({ [1] }) => {
  const data = await request.[2]();
  return new Response(JSON.stringify({ received: data }), { headers: { 'Content-Type': '[3]' } });
};

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

Arequest

Bjson

Capplication/json

DformData

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'formData' instead of 'json' to parse the request body.

Forgetting to set the Content-Type header to 'application/json'.

The action function receives request. To read JSON body, use request.json(). The response content type for JSON is application/json.