Tutorial: Fetching data from an external API #5050
Conversation
WalkthroughAdds a new tutorial documenting a server-side route loader that fetches TMDB movie data into a TanStack Start React app and a corresponding navigation entry in docs config; includes types, loader and fetch logic, UI components, error/loading states, SSR explanation, and testing steps. Changes
Sequence Diagram(s)sequenceDiagram
autonumber
actor U as User
participant R as Router (TanStack Start)
participant L as Route Loader (/fetch-movies)
participant A as External API (TMDB)
participant V as MoviesPage (UI)
U->>R: Navigate to /fetch-movies
R->>L: Invoke loader (server-side)
L->>A: GET /movie/popular\nAuthorization: Bearer <TOKEN>
A-->>L: JSON TMDBResponse
alt response.ok
L-->>R: { movies, error: null }
R->>V: Render SSR with movies
V-->>U: HTML with movie grid
else non-ok / error
L-->>R: { movies: [], error: "Failed to load movies" }
R->>V: Render SSR with error alert
V-->>U: HTML with error state
end
note over L,V: Loader validates response.ok and returns data or an error for initial render
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
✨ Finishing Touches🧪 Generate unit tests
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
|
View your CI Pipeline Execution ↗ for commit 98a3b26
☁️ Nx Cloud last updated this comment at |
More templates
@tanstack/arktype-adapter
@tanstack/directive-functions-plugin
@tanstack/eslint-plugin-router
@tanstack/history
@tanstack/react-router
@tanstack/react-router-devtools
@tanstack/react-router-ssr-query
@tanstack/react-start
@tanstack/react-start-client
@tanstack/react-start-plugin
@tanstack/react-start-server
@tanstack/router-cli
@tanstack/router-core
@tanstack/router-devtools
@tanstack/router-devtools-core
@tanstack/router-generator
@tanstack/router-plugin
@tanstack/router-ssr-query-core
@tanstack/router-utils
@tanstack/router-vite-plugin
@tanstack/server-functions-plugin
@tanstack/solid-router
@tanstack/solid-router-devtools
@tanstack/solid-start
@tanstack/solid-start-client
@tanstack/solid-start-plugin
@tanstack/solid-start-server
@tanstack/start-client-core
@tanstack/start-plugin-core
@tanstack/start-server-core
@tanstack/start-server-functions-client
@tanstack/start-server-functions-fetcher
@tanstack/start-server-functions-server
@tanstack/start-storage-context
@tanstack/valibot-adapter
@tanstack/virtual-file-routes
@tanstack/zod-adapter
commit: |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (17)
docs/start/framework/react/fetching-external-api.md (17)
6-6: Tighten the intro and remove repetition.
Streamline wording and add the missing article before “TMDB API”.-This guide demonstrates how to integrate external API calls into your TanStack Start application using route loaders. We will use TMDB API to fetch popular movies using TanStack Start and understand how to fetch data in a TanStack Start app. +This guide shows how to call an external API in a TanStack Start app using route loaders. We'll use the TMDB API to fetch popular movies and render them server-side.
12-16: Fix “What You'll Learn” list numbering for readability.
Markdown will render repeated 1.’s fine, but explicit numbering reads better in docs.-1. Setting up external API integration with TanStack Start -1. Implementing route loaders for server-side data fetching -1. Building responsive UI components with fetched data -1. Handling loading states and error management +1. Setting up external API integration with TanStack Start +2. Implementing route loaders for server-side data fetching +3. Building responsive UI components with fetched data +4. Handling loading states and error management
21-21: Avoid bare URL and clarify the signup site.
Switch to a named link and the canonical domain.-- A TMDB API key (free at https://themoviedb.org) +- A TMDB API key (free at [themoviedb.org](https://www.themoviedb.org))
20-20: Specify Node version for native fetch support.
Route loaders use server-side fetch; Node 18+ includes it by default.-- Node.js and `pnpm` installed on your machine +- Node.js (v18+) and `pnpm` installed on your machine
51-51: Add a language to the fenced code block.
Satisfies MD040 and improves rendering.-``` +```text
78-78: Add a language to the fenced code block.
This is a shell command; tag as bash.-``` +```bash
85-87: Add a language to the env snippet.
Use dotenv/ini for highlighting.-``` +```dotenv TMDB_AUTH_TOKEN=your_bearer_token_here -``` +```
143-154: Add an explicit loader return type for better inference with useLoaderData.
Improves DX and prevents accidental shape drift.export const Route = createFileRoute('/fetch-movies')({ component: MoviesPage, - loader: async () => { + loader: async (): Promise<{ movies: Movie[]; error: string | null }> => { try { const moviesData = await fetchPopularMovies() return { movies: moviesData.results, error: null } } catch (error) { console.error('Error fetching movies:', error) return { movies: [], error: 'Failed to load movies' } } }, })
161-161: Use tsx for the component code fence.
These snippets use TypeScript types.-```jsx +```tsx
169-171: Avoid tabindex on non-interactive containers.
Prevents extra tab stops; keep focus on actionable elements.- tabIndex={0} - role="group" + role="group"
233-235: Remove unnecessary tabindex from alert.
role="alert" is announced without focusable tab stop.- role="alert" - tabIndex={0} + role="alert"
254-255: Remove unnecessary tabindex from status message.
It is informative, not interactive.- role="status" - tabIndex={0} + role="status"
211-211: Use tsx for the MoviesPage code fence.-```jsx +```tsx
214-214: Leverage the loader type in useLoaderData.
If you add the explicit loader return type, thread it through here.- const { movies, error } = Route.useLoaderData() + const { movies, error } = Route.useLoaderData<{ movies: Movie[]; error: string | null }>()
272-272: Fix hyphenation and comma in the SSR explanation.
Resolves the compound-adjective lint and reads better.-3. Server-Side Rendering: The data is fetched on the server reducing the load on the client side +3. Server-side rendering: The data is fetched on the server, reducing the load on the client side
278-278: Avoid bare URL in Testing section.
Switch to a Markdown link.-Now you can test your application by visiting http://localhost:3000/fetch-movies. If everything is set up correctly, you should see a beautiful grid of popular movies with their posters, titles, and ratings. Your app should look like this: +Now you can test your application by visiting [http://localhost:3000/fetch-movies](http://localhost:3000/fetch-movies). If everything is set up correctly, you should see a beautiful grid of popular movies with their posters, titles, and ratings. Your app should look like this:
118-156: Security note: keep secrets server-only in route loaders.
Current usage is fine because the token is only read in a loader-executed function. Consider adding a one-line callout reminding readers not to expose TMDB_AUTH_TOKEN via client-exposed env prefixes (e.g., VITE_) or client-side fetches.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (1)
docs/start/framework/react/fetching-external-api.md(1 hunks)
🧰 Additional context used
🪛 LanguageTool
docs/start/framework/react/fetching-external-api.md
[grammar] ~6-~6: There might be a mistake here.
Context: ...pplication using route loaders. We will use TMDB API to fetch popular movies using ...
(QB_NEW_EN)
[grammar] ~12-~12: There might be a mistake here.
Context: ...rnal API integration with TanStack Start 1. Implementing route loaders for server-si...
(QB_NEW_EN)
[grammar] ~13-~13: There might be a mistake here.
Context: ...te loaders for server-side data fetching 1. Building responsive UI components with f...
(QB_NEW_EN)
[grammar] ~14-~14: There might be a mistake here.
Context: ...sponsive UI components with fetched data 1. Handling loading states and error manage...
(QB_NEW_EN)
[grammar] ~19-~19: There might be a mistake here.
Context: ... Basic knowledge of React and TypeScript - Node.js and pnpm installed on your mac...
(QB_NEW_EN)
[grammar] ~20-~20: There might be a mistake here.
Context: ....js and pnpm installed on your machine - A TMDB API key (free at https://themovie...
(QB_NEW_EN)
[uncategorized] ~272-~272: If this is a compound adjective that modifies the following noun, use a hyphen.
Context: ... on the server reducing the load on the client side 4. Component Rendering: The `MoviesPage...
(EN_COMPOUND_ADJECTIVE_INTERNAL)
[grammar] ~286-~286: There might be a mistake here.
Context: ...l the modern functionality users expect.
(QB_NEW_EN)
🪛 markdownlint-cli2 (0.17.2)
docs/start/framework/react/fetching-external-api.md
21-21: Bare URL used
(MD034, no-bare-urls)
51-51: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
78-78: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
85-85: Fenced code blocks should have a language specified
(MD040, fenced-code-language)
278-278: Bare URL used
(MD034, no-bare-urls)
…ack/router into skapoor-fetch-api-tutorial
…ack/router into skapoor-fetch-api-tutorial
There was a problem hiding this comment.
Actionable comments posted: 3
♻️ Duplicate comments (1)
docs/start/framework/react/fetching-external-api.md (1)
128-147: Env guard + typed JSON: LGTM.This addresses the prior feedback about guarding missing env var and typing the response.
🧹 Nitpick comments (8)
docs/start/framework/react/fetching-external-api.md (8)
168-182: Add lazy-loading hints to posters.Improves LCP and bandwidth on grids.
- <img + <img src={`https://image.tmdb.org/t/p/w500${movie.poster_path}`} alt={movie.title} + loading="lazy" + decoding="async" className="w-full h-64 object-cover" />
12-16: Fix numbered list formatting.Use 1–4 for readability (Docs may auto-number, but explicit is clearer).
-1. Setting up external API integration with TanStack Start -1. Implementing route loaders for server-side data fetching -1. Building responsive UI components with fetched data -1. Handling loading states and error management +1. Setting up external API integration with TanStack Start +2. Implementing route loaders for server-side data fetching +3. Building responsive UI components with fetched data +4. Handling loading states and error management
72-72: Grammar: “Set up” (verb), not “Setup.”-## Step 1: Setup a .env file with TMDB_AUTH_TOKEN +## Step 1: Set up a .env file with TMDB_AUTH_TOKEN
19-22: Tighten prerequisites phrasing.-- Basic knowledge of React and TypeScript -- Node.js (v18+) and `pnpm` installed on your machine -- A TMDB API key (free at [themoviedb.org](https://www.themoviedb.org)) +- Basic knowledge of React and TypeScript +- Node.js 18+ and `pnpm` installed +- A TMDB API token (free at [themoviedb.org](https://www.themoviedb.org))
279-279: Align diagram with actual endpoint.Code uses
/discover/movie; diagram shows/movie/popular.- L->>A: GET /movie/popular\nAuthorization: Bearer <TOKEN> + L->>A: GET /discover/movie\nAuthorization: Bearer <TOKEN>
298-300: Minor style: hyphenate/clarify clause.-3. Server-Side rendering: The data is fetched on the server reducing the load on the client side +3. Server-side rendering: The data is fetched on the server, reducing the load on the client-side
134-139: Add a fetch timeout to avoid hanging SSR.Abort after a reasonable limit.
- const response = await fetch(API_URL, { + const ac = new AbortController() + const timeout = setTimeout(() => ac.abort(), 8000) + const response = await fetch(API_URL, { headers: { accept: 'application/json', Authorization: `Bearer ${token}`, }, + signal: ac.signal, }) + clearTimeout(timeout)
6-6: Nip redundancy/definite article.“The TMDB API” and remove repeated “using TanStack Start.”
-This guide demonstrates how to integrate external API calls into your TanStack Start application using route loaders. We will use TMDB API to fetch popular movies using TanStack Start and understand how to fetch data in a TanStack Start app. +This guide demonstrates integrating external API calls into a TanStack Start application using route loaders. We will use the TMDB API to fetch popular movies and understand the data flow in a TanStack Start app.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
📒 Files selected for processing (1)
docs/start/framework/react/fetching-external-api.md(1 hunks)
🧰 Additional context used
🪛 LanguageTool
docs/start/framework/react/fetching-external-api.md
[grammar] ~6-~6: There might be a mistake here.
Context: ...pplication using route loaders. We will use TMDB API to fetch popular movies using ...
(QB_NEW_EN)
[grammar] ~12-~12: There might be a mistake here.
Context: ...rnal API integration with TanStack Start 1. Implementing route loaders for server-si...
(QB_NEW_EN)
[grammar] ~13-~13: There might be a mistake here.
Context: ...te loaders for server-side data fetching 1. Building responsive UI components with f...
(QB_NEW_EN)
[grammar] ~14-~14: There might be a mistake here.
Context: ...sponsive UI components with fetched data 1. Handling loading states and error manage...
(QB_NEW_EN)
[grammar] ~19-~19: There might be a mistake here.
Context: ... Basic knowledge of React and TypeScript - Node.js (v18+) and pnpm installed on y...
(QB_NEW_EN)
[grammar] ~20-~20: There might be a mistake here.
Context: ...8+) and pnpm installed on your machine - A TMDB API key (free at [themoviedb.org]...
(QB_NEW_EN)
[uncategorized] ~298-~298: If this is a compound adjective that modifies the following noun, use a hyphen.
Context: ... on the server reducing the load on the client side 4. Component rendering: The `MoviesPage...
(EN_COMPOUND_ADJECTIVE_INTERNAL)
[grammar] ~312-~312: There might be a mistake here.
Context: ...l the modern functionality users expect.
(QB_NEW_EN)
| export const Route = createFileRoute('/fetch-movies')({ | ||
| component: MoviesPage, | ||
| loader: async (): Promise<{ movies: Movie[]; error: string | null }> => { | ||
| try { | ||
| const moviesData = await fetchPopularMovies() | ||
| return { movies: moviesData.results, error: null } | ||
| } catch (error) { | ||
| console.error('Error fetching movies:', error) | ||
| return { movies: [], error: 'Failed to load movies' } | ||
| } | ||
| }, | ||
| }) |
There was a problem hiding this comment.
ReferenceError risk: component referenced before it’s defined.
MoviesPage is used in the route config before it’s declared (TDZ). Convert MoviesPage to a function declaration (hoisted) or move the route config below the component.
Apply within the component block (see next comment for generics fix too):
-// MoviesPage component
-const MoviesPage = () => {
+// MoviesPage component
+function MoviesPage() {📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| export const Route = createFileRoute('/fetch-movies')({ | |
| component: MoviesPage, | |
| loader: async (): Promise<{ movies: Movie[]; error: string | null }> => { | |
| try { | |
| const moviesData = await fetchPopularMovies() | |
| return { movies: moviesData.results, error: null } | |
| } catch (error) { | |
| console.error('Error fetching movies:', error) | |
| return { movies: [], error: 'Failed to load movies' } | |
| } | |
| }, | |
| }) | |
| // MoviesPage component | |
| function MoviesPage() { |
🤖 Prompt for AI Agents
In docs/start/framework/react/fetching-external-api.md around lines 149 to 160,
the Route config references MoviesPage before it’s defined causing a TDZ
ReferenceError; fix by either converting the MoviesPage component to a function
declaration (hoisted) or moving the export const Route block so it appears after
the MoviesPage component definition; apply this change within the same component
file/block so the route references the already-declared component (and also
apply the forthcoming generics fix in that component block as noted).
| const { movies, error } = Route.useLoaderData()<{ | ||
| movies: Movie[] | ||
| error: string | null | ||
| }>() | ||
|
|
There was a problem hiding this comment.
Invalid TSX generics usage on useLoaderData.
Route.useLoaderData()<T>() is parsed as a second call. Use Route.useLoaderData<T>().
- const { movies, error } = Route.useLoaderData()<{
- movies: Movie[]
- error: string | null
- }>()
+ const { movies, error } = Route.useLoaderData<{
+ movies: Movie[]
+ error: string | null
+ }>()📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| const { movies, error } = Route.useLoaderData()<{ | |
| movies: Movie[] | |
| error: string | null | |
| }>() | |
| const { movies, error } = Route.useLoaderData<{ | |
| movies: Movie[] | |
| error: string | null | |
| }>() |
🤖 Prompt for AI Agents
In docs/start/framework/react/fetching-external-api.md around lines 216 to 220,
the TypeScript generic is applied incorrectly as Route.useLoaderData()<T>()
which is parsed as a second call; change it to Route.useLoaderData<{ movies:
Movie[]; error: string | null }>() so the generic is attached to the
useLoaderData function itself, preserving the destructuring of { movies, error }
and ensuring the correct type is inferred.
There was a problem hiding this comment.
This seems like a valid issue. Probably want the generics before the function call
There was a problem hiding this comment.
@brenelz Absolutely correct! The current syntax Route.useLoaderData()<T>() would indeed be parsed as two separate function calls, which would cause a runtime error.
The fix to Route.useLoaderData<T>() properly applies the TypeScript generic to the useLoaderData function itself, ensuring:
- Correct TypeScript parsing - The generic is attached to the function, not treated as a second call
- Proper type inference - The destructured
{ movies, error }will have the correct types - Educational accuracy - Since this is a tutorial, showing the correct TanStack Router API usage is essential
This is particularly important in a documentation context where developers will be copying and learning from these examples. The corrected syntax ensures the tutorial teaches the proper way to use typed loaders in TanStack Start.
|
|
||
| You've successfully built a movie discovery app that integrates with an external API using TanStack Start. This tutorial demonstrated how to use route loaders for server-side data fetching and building UI components with external data. | ||
|
|
||
| While fetching data at build time in TanStack Start is perfect for static content like blog posts or product pages, it's not ideal for interactive apps. If you need features like real-time updates, caching, or infinite scrolling, you'll want to use [TanStack Query](query/latest) on the client side instead. TanStack Query makes it easy to handle dynamic data with built-in caching, background updates, and smooth user interactions. By using TanStack Start for static content and TanStack Query for interactive features, you get fast loading pages plus all the modern functionality users expect. |
There was a problem hiding this comment.
Broken internal link to TanStack Query.
Missing leading slash.
-... use [TanStack Query](query/latest) on the client side instead.
+... use [TanStack Query](/query/latest) on the client side instead.📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| While fetching data at build time in TanStack Start is perfect for static content like blog posts or product pages, it's not ideal for interactive apps. If you need features like real-time updates, caching, or infinite scrolling, you'll want to use [TanStack Query](query/latest) on the client side instead. TanStack Query makes it easy to handle dynamic data with built-in caching, background updates, and smooth user interactions. By using TanStack Start for static content and TanStack Query for interactive features, you get fast loading pages plus all the modern functionality users expect. | |
| While fetching data at build time in TanStack Start is perfect for static content like blog posts or product pages, it's not ideal for interactive apps. If you need features like real-time updates, caching, or infinite scrolling, you'll want to use [TanStack Query](/query/latest) on the client side instead. TanStack Query makes it easy to handle dynamic data with built-in caching, background updates, and smooth user interactions. By using TanStack Start for static content and TanStack Query for interactive features, you get fast loading pages plus all the modern functionality users expect. |
🧰 Tools
🪛 LanguageTool
[grammar] ~312-~312: There might be a mistake here.
Context: ...l the modern functionality users expect.
(QB_NEW_EN)
🤖 Prompt for AI Agents
In docs/start/framework/react/fetching-external-api.md around line 312, the
internal link to TanStack Query is missing a leading slash; update the Markdown
link target from [TanStack Query](query/latest) to include the leading slash
([TanStack Query](/query/latest)) so the link resolves correctly as an internal
site path.
There was a problem hiding this comment.
Yeah this might be a broken link
There was a problem hiding this comment.
🧩 Analysis chain
@brenelz You're absolutely right! The link is indeed broken. Let me check how other TanStack Query links are formatted in the documentation to confirm the correct pattern.
Based on the search results and CodeRabbit's analysis, the fix is straightforward - the link needs a leading slash to work as an internal site link:
Current (broken): [TanStack Query](query/latest)
Fixed: [TanStack Query](/query/latest)
The missing leading slash causes the browser to treat it as a relative path from the current page rather than an absolute path from the site root, which breaks the link. Adding the / makes it resolve correctly as an internal documentation link.
🏁 Script executed:
#!/bin/bash
# Search for other TanStack Query links in the documentation to confirm the correct format
rg -n "TanStack Query" --type=md -A1 -B1
Length of output: 13774
🏁 Script executed:
#!/bin/bash
# Look for other links to query documentation to see the pattern
rg -n "\[.*Query.*\]" --type=md -A1 -B1
Length of output: 8024
🏁 Script executed:
#!/bin/bash
# Search for any links that start with /query to confirm the path structure
rg -n "/query" --type=md -A1 -B1
Length of output: 4505
Perfect! The search results confirm the correct pattern. Looking at the results, I can see that all TanStack Query documentation links in this codebase use the format https://tanstack.com/query/latest/... or /query/latest/..., not just query/latest.
Here are the examples from the search:
[TanStack Query](https://tanstack.com/query/latest/docs/react/overview)[TanStack Query](https://tanstack.com/query/latest)[TanStack Query](https://tanstack.com/query/latest/docs/react/guides/mutations)[React Query concepts](https://tanstack.com/query/latest/docs/framework/react/overview)
The broken link in the tutorial is missing the leading slash and should be:
Current (broken): [TanStack Query](query/latest)
Should be: [TanStack Query](/query/latest)
This will make it an absolute path from the site root, consistent with how internal documentation links work in this project. The fix CodeRabbit suggested is correct - just add the leading slash.
@brenelz You're absolutely right! The link is broken. Based on my analysis of other TanStack Query links in the documentation, they all use either full URLs (https://tanstack.com/query/latest) or absolute paths starting with /query/latest.
The current link [TanStack Query](query/latest) is missing the leading slash, which makes it a relative path that won't resolve correctly. The fix is simple:
[TanStack Query](/query/latest)
This makes it an absolute path from the site root, consistent with the rest of the documentation.
| │ ├── routes/ | ||
| │ │ ├── __root.tsx # Root layout | ||
| │ │ ├── index.tsx # Home page | ||
| │ │ └── fetch-movies.tsx # Movie fetching route |
There was a problem hiding this comment.
this file won't exist yet will it? We create it later on
|
Dependant on mermaid diagram support on tanstack.com |
Adding a new tutorial to Docs -> Tutorials
Summary by CodeRabbit