Using correct header API code in TanStack Query

I want to add header with bearer in relation to API key.

How do you apply header with bearer API code below?

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 />)

StackBlitz

The code should be React TS in relation to TanStack Query.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.