Theo's Typesafe Cult•3y ago

can i export data from reactQuery?

Please i need some help here. 🙏 I fetched data[] from an API using reactQuery but the problem I'm facing here is that i need to export all the properties decontructed from reactQuery such as the data[], isLoading, error so that i can be able to use it in another component, is this possible? I name the file userData.tsx

export const UserData = () => {
  const { data, isLoading, error } = useQuery<User[], ErrorConstructor>("query-users", async () =>{
    return await getAll()
  })
  if(error instanceof Error) return <div>Cannot fetch data</div>

  if(isLoading) return <LoadingState/>

  if(!data) return <div>Error occour</div>
  return (
    data
  )
}

export const UserData = () => {
  const { data, isLoading, error } = useQuery<User[], ErrorConstructor>("query-users", async () =>{
    return await getAll()
  })
  if(error instanceof Error) return <div>Cannot fetch data</div>

  if(isLoading) return <LoadingState/>

  if(!data) return <div>Error occour</div>
  return (
    data
  )
}

3 Replies

Neto•3y ago

just return the whole useQuery

export const useUserData = () => {
  return useQuery(...
}

export const useUserData = () => {
  return useQuery(...
}

and the component that user the hook need to handle the process itself

LekeOP•3y ago

@Neto i still don't get your explanation

Neto•3y ago

You export the result of the useQuery Given this hook style of function ComponentA can use const { } = useUserData ComponentB can use const { } = useUserData In the same manner I'm the brackets you have the same as a react query variables Data, isLoading, error, etc And they will "share" the same data because you use the same source from react query

Gaming

Programming

can i export data from reactQuery?