Simplify your stack and build anything. Or everything.
Build tomorrow’s web with a modern solution you truly own.
Code-based nature means you can build on top of it to power anything.
It’s time to take back your content infrastructure.

Recommended approach for handling async state management with Payload CMS?

default discord avatar
jakey___2 years ago
7

My journey of handling state management with Next.js and Payload CMS had me using redux toolkit for state management, then react thunks for async management, then RTK query... but now I see that there's other options like Apollo and such.



I'm finding this whole situation more and more complex and confusing. Any recommendations out there? Or am I on the right path with RTK query at this point?

  • default discord avatar
    paulpopus2 years ago

    RTK query sounds like suffering to me, what exactly are you using it for?



    Are you just fetching data then caching it locally for the user?

  • default discord avatar
    jakey___2 years ago

    not sure if cache is even that necessary in my app. it's a game that's gonna make frequent calls... which as I type that makes me think I should look into websockets instead



    But just for sake of the question. I would ask what other prefer in terms of getting data from Payload (or any other GQL api) and updating a store (be it redux or another preferred framework).

  • default discord avatar
    paulpopus2 years ago

    I strongly recommend

    https://tanstack.com/query/latest

    (and other tanstack tech, really good stuff!



    i use it with rematch

    https://rematchjs.org/

    which kinda simplifies redux a lot and makes it a lot nicer to work with imo



    I also wrote a guide here on how to setup gql codegen with react query for payload

    https://nouance.io/articles/how-to-use-graphql-codegen-with-payload-and-react-query-in-nextjs

    react-query already gives you local caching and control over the interval of re-fetching and w/e you need out of the box



    it also has server side fetching and the ability to use rehydration for that server side fetched data



    so you have a lot of flexibility out of the box in a really easy to use lib



    just make sure you follow its setup steps carefully to get the client setup

  • default discord avatar
    jakey___2 years ago

    Btw, this is looking really fantastic. I'm having a team member just swap our redux for rematch on a project. Thanks for the suggestion!

  • default discord avatar
    paulpopus2 years ago

    Yeah I've used redux toolkit, jotai and a few others and now im on rematchjs...it still has some problems but overall its much cleaner and still powerful

  • default discord avatar
    jakey___2 years ago

    what kind of things have you run into? (so i can prep for it 🙂 )

  • default discord avatar
    paulpopus2 years ago

    no problems, more about design philosophy, it still has quite a bit of boilerplate to setup, luckily its pretty simple



    but i wouldnt be able to set it up without ts 😂

Star on GitHub

Star

Chat on Discord

Discord

online

Can't find what you're looking for?

Get dedicated engineering support directly from the Payload team.