Integrating the API
🏠The everyday picture
The front office and the back office agree a set of forms for passing work between them. If either side changes a form without telling the other, work gets lost.
📘What it really is
- Use your Module 38 setup:
api.ts, TanStack Query, mutations and error handling. - Send table settings to the API as query parameters, and include them in the query key:
useQuery({
queryKey: ["enquiries", { status, assignee, q, sort, page }],
queryFn: () => listEnquiries({ status, assignee, q, sort, page }),
placeholderData: keepPreviousData,
});
keepPreviousData keeps the current page visible while the next one loads, so the table doesn't flash empty.
-
Share types between frontend and backend so they can't drift apart: in Module 50, both use the same
types.ts(or types generated from the API description, Module 49). -
Until the backend exists, json-server supports
?status=new&_sort=createdAt&_page=2style queries, close enough to practise. -
Check every requirement against the running app, one by one.
🖱️Try it
Connect the table to the API with filters, sorting and paging as query parameters. Implement the detail page with
status changes, assignment and notes as mutations. Tick off each requirement in REQUIREMENTS.md as it works.
✅Quick check
Why include the filters in the query key?
Show the answer
Each combination is cached separately, and changing a filter fetches the right data.
What does keepPreviousData do for a paginated table?
Show the answer
Keeps the current page showing while the next loads, avoiding an empty flash.