trpc React Query integration (migrating server state out of redux)

[andrew-bierman]

Initially, we used redux toolkit to manage all our async calls and state. But, we can make our code much more efficient by using the trpc query (which is just a wrapper around react query) to handle this.

All our thunks already use trpc. We need to move these to custom trpc query hooks, to take advantage of the react query wrapper.

This works easily for all our basic fetching requests. But the cache is where we can do some cool stuff. If we utilize the useContext and optimistic updates, we can eliminate the need for MOST of our global store state.

See progress being made here https://github.com/andrew-bierman/PackRat/tree/feat/experimenting-with-trpc-query

https://github.com/andrew-bierman/PackRat/pull/392

And build upon this.

Keep track of slices in progress with the task list on that PR!

The goal is to have a lot less in our redux store, as we can sync server state directly with proper trpc query usage.

Phases

• [x] #513
• [x] #514
• [ ] Add optimistic updates to query cache

DISREGARD - leaving for context I want all requests to go through redux. But We have some API requests that do not need to be stored in our global store, I think RTK Query could help us to implement these while still following redux best practices.

I'm not sure if things like our photon searches, weather, and a few others need to be kept in global store? It might make more sense to use RTK Query for these types of requests. Or create queries for them, but then use the query in different slices (ie trip, destination, etc).

It looks like we can also utilize RTK Query in our thunks, providing the best of both worlds with easy to use hooks for async tasks, and a traditional global store.

[andrew-bierman]

Adding items to a pack via the /trips screen is broken. It works from the standard pack details screen. Also packs are appearing empty in the /trips screen and not showing their items.

[andrew-bierman]

We need to figure out our state management solution for something like create trip. How should we pass around the data for this? I'm open to pass around state props if we can avoid drilling too deep.

We have some stuff in redux still (ie weather state, search state (photon)), but i think we could probably optimize this. Maybe we move state logic and mutations to more defined redux slices (ie set weather object into the createTrip redux store. So all async stuff would go through trpc query but for some of these more complex forms we use redux? But I think we could also probably accomplish a lot of this with just useState also.

Or custom hook with useState could solve too honestly.

[ovezovv]

We need to figure out our state management solution for something like create trip. How should we pass around the data for this? I'm open to pass around state props if we can avoid drilling too deep.

We have some stuff in redux still (ie weather state, search state (photon)), but i think we could probably optimize this. Maybe we move state logic and mutations to more defined redux slices (ie set weather object into the createTrip redux store. So all async stuff would go through trpc query but for some of these more complex forms we use redux? But I think we could also probably accomplish a lot of this with just useState also.

Or custom hook with useState could solve too honestly.

@andrew-bierman I can suggest using recoil JS, if you want I can create some basic setup and fire up PR with that which you can look at it.

[taronaleksanian]

We need to figure out our state management solution for something like create trip. How should we pass around the data for this? I'm open to pass around state props if we can avoid drilling too deep.

We have some stuff in redux still (ie weather state, search state (photon)), but i think we could probably optimize this. Maybe we move state logic and mutations to more defined redux slices (ie set weather object into the createTrip redux store. So all async stuff would go through trpc query but for some of these more complex forms we use redux? But I think we could also probably accomplish a lot of this with just useState also.

Or custom hook with useState could solve too honestly.

I started refactoring of search input, but I ended up to find solution for this. I'm using url serach params for stroing global state, it is a good practice I think, it also saves current state when the user reloads the page.
https://github.com/andrew-bierman/PackRat/pull/653

[taronaleksanian]

However I think it's not a solution for all the cases, I'm still figuring out how to solve i. e. weather object, Obviously using queryString for the complex state is not the best solution,