Skip to content

Commit 5fd09ee

Browse files
ci: apply automated fixes
1 parent 3acf9c8 commit 5fd09ee

File tree

1 file changed

+14
-14
lines changed

1 file changed

+14
-14
lines changed

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

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -114,6 +114,7 @@ export interface TMDBResponse {
114114
```
115115

116116
## Step 3: Creating the Route with API Fetch Function
117+
117118
To call the TMDB API, we're going to create a server function that fetches data on the server. This approach keeps our API credentials secure by never exposing them to the client.
118119
Let's create our route that fetches data from the TMDB API. Create a new file at `src/routes/fetch-movies.tsx`:
119120

@@ -126,23 +127,22 @@ import { createServerFn } from '@tanstack/react-start'
126127
const API_URL =
127128
'https://api.themoviedb.org/3/discover/movie?include_adult=false&include_video=false&language=en-US&page=1&sort_by=popularity.desc'
128129

129-
const fetchPopularMovies = createServerFn().handler(async (): Promise<TMDBResponse> => {
130-
const response = await fetch(
131-
API_URL,
132-
{
130+
const fetchPopularMovies = createServerFn().handler(
131+
async (): Promise<TMDBResponse> => {
132+
const response = await fetch(API_URL, {
133133
headers: {
134-
'accept': 'application/json',
135-
'Authorization': `Bearer ${process.env.TMDB_AUTH_TOKEN}`,
134+
accept: 'application/json',
135+
Authorization: `Bearer ${process.env.TMDB_AUTH_TOKEN}`,
136136
},
137-
}
138-
)
137+
})
139138

140-
if (!response.ok) {
141-
throw new Error(`Failed to fetch movies: ${response.statusText}`)
142-
}
139+
if (!response.ok) {
140+
throw new Error(`Failed to fetch movies: ${response.statusText}`)
141+
}
143142

144-
return response.json()
145-
})
143+
return response.json()
144+
},
145+
)
146146

147147
export const Route = createFileRoute('/fetch-movies')({
148148
component: MoviesPage,
@@ -158,7 +158,7 @@ export const Route = createFileRoute('/fetch-movies')({
158158
})
159159
```
160160

161-
*What's happening here:*
161+
_What's happening here:_
162162

163163
- `createServerFn()` creates a server-only function that runs exclusively on the server, ensuring our `TMDB_AUTH_TOKEN` environment variable never gets exposed to the client. The server function makes an authenticated request to the TMDB API and returns the parsed JSON response.
164164
- The route loader runs on the server when a user visits /fetch-movies, calling our server function before the page renders

0 commit comments

Comments
 (0)