Kevin Powell - Community•2y ago

can i export data isLoading error 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
  )
}

5 Replies

thatsbro•2y ago

You can use prop or redux Rtk to send data.

Coder_Carl•2y ago

either set it up through context OR put it into the common ancestor and pass it through as props

Daryl•2y ago

Take a look at this article: https://tkdodo.eu/blog/react-query-as-a-state-manager

React Query as a State Manager

Everything you need to know to make React Query your single source of truth state manager for your async state

Daryl•2y ago

The QueryKey uniquely identifies your query, so as long you call the query with the same key in two different places, they will get the same data.

The QueryKey uniquely identifies your query, so as long you call the query with the same key in two different places, they will get the same data.

Leke•2y ago

Ok Let me take a look at the article

Gaming

Programming

can i export data isLoading error from reactQuery?