Using correct header api code in tanstack query

[jt4000]

Goal:
Add header with bearer in realtion to api key

Problem:
How do you apply header with bearer api code below?

Code:

import React from 'react'
import ReactDOM from 'react-dom/client'
import {
  QueryClient,
  QueryClientProvider,
  useQuery,
} from '@tanstack/react-query'
import { ReactQueryDevtools } from '@tanstack/react-query-devtools'

const queryClient = new QueryClient()

export default function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <ReactQueryDevtools />
      <Example />
    </QueryClientProvider>
  )
}

function Example() {
  const { isPending, error, data, isFetching } = useQuery({
    queryKey: ['repoData'],
    queryFn: async () => {
      const response = await fetch(
        'https://api.github.com/repos/TanStack/query',
      )
      return await response.json()
    },
  })

  if (isPending) return 'Loading...'

  if (error) return 'An error has occurred: ' + error.message

  return (
    <div>
      <h1>{data.full_name}</h1>
      <p>{data.description}</p>
      <strong>👀 {data.subscribers_count}</strong>{' '}
      <strong>✨ {data.stargazers_count}</strong>{' '}
      <strong>🍴 {data.forks_count}</strong>
      <div>{isFetching ? 'Updating...' : ''}</div>
    </div>
  )
}

const rootElement = document.getElementById('root')
if (!rootElement) throw new Error('Missing #root element')
ReactDOM.createRoot(rootElement).render(<App />)

Other:
*The code should be react TS in relation to Tanstack query
*https://stackblitz.com/edit/tanstack-query-tzj47osm?file=src%2Findex.tsx&preset=node

[enmanuelcanelon]

Hey @jt4000!

Adding a Bearer token is quite straightforward. You just need to pass an options object as the second argument to your fetch call inside the queryFn.

Also, since you are using fetch, it's a good practice to manually check if the response is "ok". Unlike axios, fetch doesn't throw an error on 4xx or 5xx status codes, and TanStack Query needs a rejected promise to trigger the error state.

Here is the updated code for your Example function:
Just make sure to replace YOUR_API_KEY_HERE with your actual token. If you're using environment variables in Vite or Next.js, it would be something like process.env.NEXT_PUBLIC_API_KEY.Hope this helps you get it running!

function Example() {
  const { isPending, error, data, isFetching } = useQuery({
    queryKey: ['repoData'],
    queryFn: async () => {
      const response = await fetch(
        'https://api.github.com/repos/TanStack/query',
        {
          method: 'GET',
          headers: {
            'Authorization': `Bearer YOUR_API_KEY_HERE`,
            'Content-Type': 'application/json',
          },
        }
      );

      if (!response.ok) {
        throw new Error('Network response was not ok');
      }

      return await response.json();
    },
  });

  if (isPending) return 'Loading...';

  if (error) return 'An error has occurred: ' + error.message;

  return (
    <div>
      <h1>{data.full_name}</h1>
      <p>{data.description}</p>
      <strong> {data.subscribers_count}</strong>{' '}
      <strong> {data.stargazers_count}</strong>{' '}
      <strong> {data.forks_count}</strong>
      <div>{isFetching ? 'Updating...' : ''}</div>
    </div>
  );
}