Resource routes for APIs in Remix - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Remix resource route loader?

Given this loader function in a Remix resource route, what will the response body be?

Remix

export async function loader() {
  return new Response(JSON.stringify({ message: "Hello API" }), {
    headers: { "Content-Type": "application/json" },
  });
}

A {"message":"Hello API"}

B Hello API

C {"data":"Hello API"}

D undefined

💡 Hint

Remember that the loader returns a Response with JSON stringified data.

The loader returns a Response with JSON stringified object { message: "Hello API" }, so the output is the JSON string.

❓ state_output

intermediate

What HTTP method does this Remix resource route action handle?

Consider this Remix resource route action function. Which HTTP method will trigger this action?

Remix

export async function action({ request }) {
  if (request.method === "POST") {
    return new Response("Created", { status: 201 });
  }
  return new Response("Method Not Allowed", { status: 405 });
}

A GET

B POST

C PUT

D DELETE

💡 Hint

Check the condition inside the action function for the request method.

The action checks if request.method is "POST" and returns 201 Created only then. Other methods get 405.

📝 Syntax

advanced

Which option correctly defines a Remix resource route with a DELETE action?

Choose the correct Remix resource route code snippet that handles DELETE requests in the action function.

A

export async function action({ request }) {
  if (request.method === DELETE) {
    return new Response(null, { status: 204 });
  }
  return new Response("Not Allowed", { status: 405 });
}

B

export async function action({ request }) {
  if (request.method === "delete") {
    return new Response(null, { status: 204 });
  }
  return new Response("Not Allowed", { status: 405 });
}

C

export async function action({ request }) {
  if (request.method === "DELETE") {
    return new Response(null, { status: 204 });
  }
  return new Response("Not Allowed", { status: 405 });
}

D

export async function action({ request }) {
  if (request.method = "DELETE") {
    return new Response(null, { status: 204 });
  }
  return new Response("Not Allowed", { status: 405 });
}

💡 Hint

Check the case sensitivity and syntax of the method comparison.

Option C correctly compares request.method to the string "DELETE" with triple equals and correct casing. Others have errors like wrong case, missing quotes, or assignment instead of comparison.

🔧 Debug

advanced

Why does this Remix resource route loader cause a runtime error?

Analyze this loader function. Why will it cause a runtime error when called?

Remix

export async function loader() {
  const data = await fetch('/api/data');
  return data.json();
}

A The URL '/api/data' is invalid causing a network error

B fetch is not defined in the server environment causing ReferenceError

C The loader returns a Response object instead of JSON causing a type error

D data.json() returns a promise but loader does not await it causing a runtime error

💡 Hint

Consider the async nature of data.json() and how the loader returns its result.

data.json() returns a promise. The loader returns that promise directly without awaiting, which Remix expects to be a Response or serializable data, causing a runtime error.

🧠 Conceptual

expert

Which option best describes the purpose of resource routes in Remix APIs?

Choose the statement that correctly explains the role of resource routes in Remix API design.

A Resource routes handle data fetching and mutations without rendering UI, focusing on HTTP methods for RESTful APIs

B Resource routes are used to render React components with server-side data fetching

C Resource routes automatically generate UI forms for CRUD operations

D Resource routes are only for static file serving and do not support dynamic data

💡 Hint

Think about how resource routes differ from UI routes in Remix.

Resource routes in Remix are designed to handle API requests using HTTP methods like GET, POST, PUT, DELETE without rendering UI components. They focus on data operations for RESTful APIs.