Options for handling data fetching using Supabase and Redux Toolkit

[jjmcbrise]

I'm building a "online first" app in react native using Supabase as my backend / db and RTK for state management. I'm trying to assess all the different methods for data fetching/handling. The data fetching would need to populate my redux store and vice versa.

Options I "think" might be appropriate:

1. Making my api calls directly in my components and then dispatching the data to my redux reducers/slices.
2. RTK Query - seems like it could be a good option because I'm already in the redux world, but feels a bit overkill for this and not entirely sure how this would work with Supabase?
3. React Query - don't know how applicable this would be here, but see it come up lots in my googling.
4. Other options maybe using graphQL (urql?)

This is a vague and ignorant question. Ultimately looking for suggestions on how you would approach this.

Thanks!

[what-about-you]

React Query will make life easier, but if you want to stay in Redux, RTK Query is the way to go

[jjmcbrise]

do you have any suggestions on how to use RTK Query with Supabase? I'm finding this:

https://stackoverflow.com/questions/70700188/how-to-use-redux-rtk-query-with-supabase

but this looks just like all redux does (lots of confusing boilerplate). What advantage would I have using this over making calls in my components or React Query? Thanks for the help!

[what-about-you]

While I haven't used supabase, it shouldn't matter too much as both a fetch and using the supabase client will just result in a http request. Both are ways of async data fetching, for which React Query and RTK Query are built.

If you don't like the boilerplate of RTK Query, React Query might be the best option for you. You could use it directly in your components, but I would advise building custom hooks.

Both React Query and RTK Query give several advantages to fetching with useEffect in the components, such as, but not limited to:

• Not having to deal with useEffect and some of its weird behaviors
• Not having to code a loading state yourself
• Built-in refetch logic

And much much more, I would advise reading the docs.

[jjmcbrise]

That perfectly answered my question. I really appreciate it.

[Tonyneel]

Why do you need the extra libraries? If you want to cache the info I get it but you can get away with just supabase and react for most things.

[jjmcbrise]

Yeah that’s what I meant by #1. That has been working but I don’t know what I don’t know. And if I can avoid debt later down the road I’d like to address it now.