ci: apply automated fixes

Author: autofix-ci[bot]

docs/start/framework/react/fetching-external-api.md

@@ -3,13 +3,12 @@ id: fetching-external-api
 title: Calling an external API 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 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.
 
 The complete code for this tutorial is available on [GitHub](https://github.com/shrutikapoor08/tanstack-start-movies).
 
-
 ## What You'll Learn
+
 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
@@ -21,8 +20,8 @@ The complete code for this tutorial is available on [GitHub](https://github.com/
 - Node.js and `pnpm` installed on your machine
 - A TMDB API key (free at https://themoviedb.org)
 
-
 ## Nice to know
+
 - [TanStack Router](https://tanstack.com/router/latest/docs/framework/react/routing/routing-concepts)
 
 ## Setting up a TanStack Start Project
@@ -48,6 +47,7 @@ pnpm dev
 ## Understanding the Project Structure
 
 At this point, the project structure should look like this:
+
 ```
 /movie-discovery
 ├── src/
@@ -69,8 +69,8 @@ At this point, the project structure should look like this:
 
 Once your project is set up, you can access your app at localhost:3000. You should see the default TanStack Start welcome page.
 
-
 ## Step 1: Setup a .env file with TMDB_AUTH_TOKEN
+
 To fetch movies from the TMDB API, you need an authentication token. You can get this for free at themoviedb.org.
 
 First, let's set up environment variables for our API key. Create a `.env` file in your project root:
@@ -81,12 +81,12 @@ touch .env
 ```
 
 Add your TMDB API token to this file:
+
 ```
 TMDB_AUTH_TOKEN=your_bearer_token_here
 ```
 
-*Important*: Make sure to add `.env` to your `.gitignore` file to keep your API keys secure.
-
+_Important_: Make sure to add `.env` to your `.gitignore` file to keep your API keys secure.
 
 ## Step 2: Defining Data Types
 
@@ -114,37 +114,32 @@ export interface TMDBResponse {
 ```
 
 ## Step 3: Creating the Route with API Fetch Function
-Now let's create our route that fetches data from the TMDB API. Create a new file at `src/routes/fetch-movies.tsx`:
 
+Now let's create our route that fetches data from the TMDB API. Create a new file at `src/routes/fetch-movies.tsx`:
 
 ```typescript
-
 // src/routes/fetch-movies.tsx
 import { createFileRoute } from '@tanstack/react-router'
 import type { Movie, TMDBResponse } from '../types/movie'
 
-
-const API_URL = 'https://api.themoviedb.org/3/discover/movie?include_adult=false&include_video=false&language=en-US&page=1&sort_by=popularity.desc'
+const API_URL =
+  'https://api.themoviedb.org/3/discover/movie?include_adult=false&include_video=false&language=en-US&page=1&sort_by=popularity.desc'
 
 async function fetchPopularMovies(): Promise<TMDBResponse> {
-  const response = await fetch(
-    API_URL,
-    {
-      headers: {
-        'accept': 'application/json',
-        'Authorization': `Bearer ${process.env.TMDB_AUTH_TOKEN}`,
-      },
-    }
-  )
-  
+  const response = await fetch(API_URL, {
+    headers: {
+      accept: 'application/json',
+      Authorization: `Bearer ${process.env.TMDB_AUTH_TOKEN}`,
+    },
+  })
+
   if (!response.ok) {
     throw new Error(`Failed to fetch movies: ${response.statusText}`)
   }
-  
+
   return response.json()
 }
 
-
 export const Route = createFileRoute('/fetch-movies')({
   component: MoviesPage,
   loader: async () => {
@@ -157,7 +152,6 @@ export const Route = createFileRoute('/fetch-movies')({
     }
   },
 })
-
 ```
 
 ## Step 4: Building the Movie Components
@@ -211,6 +205,7 @@ const MovieDetails = ({ movie }: { movie: Movie }) => {
 ```
 
 ## Step 5: Creating the MoviesPage Component
+
 Finally, let's create the main component that consumes the loader data:
 
 ```jsx
@@ -233,20 +228,31 @@ const MoviesPage = () => {
         <h1 className="text-3xl mb-6 font-bold text-center">Popular Movies</h1>
 
         {error && (
-          <div className="text-red-400 text-center mb-4 p-4 bg-red-900/20 rounded-lg" role="alert" tabIndex={0}>
+          <div
+            className="text-red-400 text-center mb-4 p-4 bg-red-900/20 rounded-lg"
+            role="alert"
+            tabIndex={0}
+          >
             {error}
           </div>
         )}
 
         {movies.length > 0 ? (
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6" aria-label="Movie List">
+          <div
+            className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6"
+            aria-label="Movie List"
+          >
             {movies.slice(0, 12).map((movie) => (
               <MovieCard key={movie.id} movie={movie} />
             ))}
           </div>
         ) : (
           !error && (
-            <div className="text-center text-gray-400" role="status" tabIndex={0}>
+            <div
+              className="text-center text-gray-400"
+              role="status"
+              tabIndex={0}
+            >
               Loading movies...
             </div>
           )
@@ -255,11 +261,10 @@ const MoviesPage = () => {
     </div>
   )
 }
-
 ```
 
-
 ### Understanding How It All Works Together
+
 Let's break down how the different parts of our application work together:
 
 1. Route Loader: When a user visits `/fetch-movies`, the loader function runs on the server
@@ -268,15 +273,14 @@ Let's break down how the different parts of our application work together:
 4. Component Rendering: The `MoviesPage` component receives the data via `Route.useLoaderData()`
 5. UI Loads: The movie cards are rendered with the fetched data
 
-
 ## Step 6: Testing Your Application
-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. 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:
 
 ![Netflix style movie setup](https://res.cloudinary.com/dubc3wnbv/image/upload/v1756512946/Screenshot_2025-08-29_at_5.14.26_PM_iiex7o.png)
 
-
 ## Conclusion
+
 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 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 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.