TTC
Theo's Typesafe Cult•3y ago
Leke

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
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
Leke
LekeOP•3y ago
@Neto i still don't get your explanation
Neto
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

Did you find this page helpful?