Tanstack/React query with a reusable function throwing errors

Question

I'm using Tanstack query to fetch data from the back end. The purpose is to have a generic function which would authorize the user before fetching the data.

const queryClient = new QueryClient()

const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement)
root.render(
  <React.StrictMode>
    <ChakraProvider theme={theme}>
      <QueryClientProvider client={queryClient}>
        <Router basename={process.env.PUBLIC_URL}>
          <Auth0ProviderWithHistory>
            <App />
          </Auth0ProviderWithHistory>
        </Router>
      </QueryClientProvider>
    </ChakraProvider>
  </React.StrictMode>
)

Then I have this useFetch function

//useFetch.js

import axios, { Method } from "axios"
import { audience } from "../utils/dataUrls"
import { useAuth0 } from "@auth0/auth0-react"

const base = {
  "Access-Control-Allow-Origin": process.env.REACT_APP_ACCESS_CORS || ""
}
const { getAccessTokenSilently, getAccessTokenWithPopup } = useAuth0()

const useFetch = async (url: string, method: Method, headers?: Record<string, any>, body?: unknown) => {
  const tokenGetter =
    process.env.REACT_APP_ENVIRONMENT === "local" ? getAccessTokenWithPopup : getAccessTokenSilently

  const token = await tokenGetter({
    audience: audience
  })
  const { data } = await axios.request({
    url,
    headers: { ...base, Authorization: `Bearer ${token}` },
    method,
    data: body
  })
  return data
}

export default useFetch

And finally, when I try to call the function using useQuery (Inside a functional component) like this -

  const checkIfTokenExists = async () => {
    const test = useQuery(["getExistingPAT"], await useFetch(`${personalAccessToken}`, "get"))
    console.log(test)
  }
  // const { status, data, isFetching } = checkIfTokenExists()
  // console.log(status, data, isFetching)
  useEffect(() => {
    checkIfTokenExists()
  }, [])

I am getting the following error: Warning: Invalid hook call. Hooks can only be called inside of the body of a function component.

Any suggestions on how I could fix this please?

Yeah you're gonna have to put your hooks in the body. You can't use hooks in a function. so x = useFetch(), y = useQuery([], x) — Yuji 'Tomita' Tomita
– Yuji 'Tomita' Tomita, Commented Aug 17, 2022 at 18:17

JnsBne · Accepted Answer · 2022-08-17 19:06:10Z

0

Please have a look at this Github issue where jrozbicki describes a good solution for this problem. It is not necessary to create a custom hook to handle the authorization logic.

answered Aug 17, 2022 at 19:06

JnsBne

1216 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Tanstack/React query with a reusable function throwing errors

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related