When will you use this?

Use this lesson to build something you can show in interviews and on your resume.

• Portfolio projects prove you can finish — recruiters click your demo link.
• Build one dashboard or shop end-to-end; that beats ten half-finished tutorials.

Real-world: tenant-scoped API calls

Each customer org sees only their data — React sends tenantId header from subdomain or JWT claim on every request.

Production-style code

function useTenantApi() {
  const { tenantId } = useAuth();
  return useMemo(() => axios.create({
    baseURL: '/api',
    headers: { 'X-Tenant-Id': tenantId }
  }), [tenantId]);
}

function ProjectList() {
  const api = useTenantApi();
  const { data } = useQuery({
    queryKey: ['projects', api.defaults.headers['X-Tenant-Id']],
    queryFn: () => api.get('/projects').then(r => r.data)
  });
  return <ul>{data?.map(p => <li key={p.id}>{p.name}</li>)}</ul>;
}

What happens in production: Multi-tenancy is architecture + API design — frontend must never leak tenant A data to tenant B UI.

Lesson example (start here)

Copy this smaller example first. Once it works, compare it with the real-world code above.

const { tenant } = useAuth();

useQuery({
  queryKey: ['projects', tenant.id],
  queryFn: () => fetch(`/api/tenants/${tenant.id}/projects`)
});

Line-by-line walkthrough

How it works (big picture)

• Every API URL includes tenant scope.
• Server verifies JWT tenant claim matches URL.
• UI never lists other tenants.

Do this on your computer

1. Add tenant to auth context after login.
2. Scope all Query keys and API paths with tenantId.
3. Test with two mock tenant accounts.
4. Read the real-world section and name which part of the app uses this topic.
5. Run the example locally and confirm the same behavior in the browser.
6. Change one value in the example (text, initial state, or URL) and predict what will happen before you save.

Experiments — try changing this

• Change text or labels in the example and save — watch the browser update.
• Break the code on purpose (remove a bracket), read the error message, then fix it.

Remember

tenantId on every request. Server enforces isolation. Include tenant in cache keys.

Common questions