Multi-tenant applications in Remix - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

How does Remix handle tenant-specific data loading?

Consider a Remix loader function that fetches data based on the tenant ID from the URL params. What will the loader return if the tenant ID is missing?

Remix

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

export async function loader({ params }) {
  const tenantId = params.tenantId;
  if (!tenantId) {
    return new Response('Tenant ID missing', { status: 400 });
  }
  const data = await fetchTenantData(tenantId);
  return json(data);
}

A It returns an empty JSON object {}.

B It throws a runtime error because tenantId is undefined.

C It returns a 400 response with message 'Tenant ID missing'.

D It returns data for a default tenant.

💡 Hint

Check the condition that handles missing tenantId in the loader.

The loader explicitly checks if tenantId is missing and returns a 400 response with a message. It does not throw or return default data.

❓ state_output

intermediate

Tenant context propagation in Remix components

Given a Remix app that uses a React context to store tenant info, what will be the value of tenantId inside a child component if the context provider is missing?

Remix

import React from 'react';

const TenantContext = React.createContext(null);

function ChildComponent() {
  const tenantId = React.useContext(TenantContext);
  return <div>{tenantId ?? 'No tenant'}</div>;
}

A The component renders 'No tenant'.

B The component throws an error because context is undefined.

C The component renders 'null'.

D The component renders an empty string.

💡 Hint

What is the default value of the context?

The context default value is null, so useContext returns null and the component shows 'No tenant'.

📝 Syntax

advanced

Correct syntax for tenant-aware route in Remix

Which route file name correctly defines a dynamic tenant segment in Remix?

A routes/$tenantId/index.tsx

B routes/:tenantId/index.tsx

C routes/tenantId/index.tsx

D routes/[tenantId]/index.tsx

💡 Hint

Remix uses a specific syntax for dynamic route segments.

Remix uses the dollar sign prefix ($) for dynamic route segments, so $tenantId is correct.

🔧 Debug

advanced

Why does tenant data not update on route change?

A Remix app fetches tenant data in a loader using params.tenantId. When navigating between tenants, the UI does not update with new tenant data. What is the likely cause?

Remix

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

export async function loader({ params }) {
  const tenantId = params.tenantId;
  return json(await fetchTenantData(tenantId));
}

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

A fetchTenantData caches data and returns stale results.

B The route path is not dynamic, so loader is not re-run on tenantId change.

C useLoaderData is used incorrectly inside the component.

D params.tenantId is undefined because of a typo.

💡 Hint

Check if the route file name matches the dynamic segment.

If the route file is not dynamic (missing $tenantId), Remix does not re-run the loader on tenantId changes, so data stays the same.

🧠 Conceptual

expert

Best practice for tenant isolation in Remix loaders

In a multi-tenant Remix app, what is the best way to ensure tenant data isolation in loaders?

A Use a single loader for all tenants and switch data based on user session.

B Fetch all tenants' data once and filter in the component based on tenantId.

C Store tenant data globally in a React context and share across loaders.

D Validate tenantId from params and fetch data only for that tenant inside each loader.

💡 Hint

Think about security and data separation at the data fetching level.

Each loader should validate tenantId and fetch only that tenant's data to prevent data leaks and ensure isolation.