CODEWITHSUNDEEP
redux-toolkitrtk-query
Thomas Timmermans
Thomas Timmermans

Reputation: 426

Use data from RTK query in multiple components

I have mulitple pages in React Native with dynamic content from the api. When the first page is loaded, the data is fetched using RTK query. So I check for any errors, the loading state (to show an Activity indicator) and if there is any data present.

I know from the docs that when I call the RTK query hook again in another component, the network call won't be triggered and instead the cached data will be returned.

But here is my question. Should I check for errors/loading state... in all other components too? I mean, it's a few lines of code that I'll need to put in every component over and over and over again:

const { data: { data } = {}, isLoading, isError } = useGetOnboardingDataQuery();

if (isLoading || isError || !data) {
  return <Loading isLoading={isLoading} isError={isError || !data} />;
}

return PageComponent....

I don't think it's necessary? How do you handle this? Can't I just reach out to the Redux-toolkit store?

This may be a stupid question because I'm new to redux-toolkit and RTK query. Just want to hear some opinions

Upvotes: 3

Views: 2275

Answers (1)

phry
phry

Reputation: 44078

Can't I just reach out to the Redux-toolkit store?

That would be the same thing as just not checking for errors, would it?

In the end: if you know it will be handled somewhere else, of course you don't need to check it. Just check that data !== undefined.

Upvotes: 1

Related Questions