RTK Query: cacheable POST

[ericponto]

I am looking for ideas on how to best handle a situation with RTK Query (or if RTK Query is not the right tool). Let's say I have an API that only has one endpoint which is a POST that takes a few params. On one page in my application (a SPA) is form and when you submit the form I want it to call that endpoint with the form data. Then on another page in the application I want to access the response from that call.

From my understanding, the options to do the call on submit would be useLazyQuery or useMutation. However neither of those options make it easy for me to get the response data on the next page.

With useLazyQuery the data is cached, so accessible, however it uses the params I pass in for the POST as part of the cache key, so I need to call useQueryState with the same params (which I don't have on the other page).

With useMutation, the response data is cleared once the form page is navigated away from and I am not aware of a way to easily store it off (without creating a custom slice or something similar).

Any thoughts on this would be much appreciated.

[markerikson]

You can definitely have "query" endpoints that use POST requests to pass parameters to the server:

  endpoints: (builder) => ({
    getPokemonByName: builder.query({
      query: (name) =>({
        url: '/some/endpoint',
        method: 'POST',
        body: {name}
      })
    }),
  }),

[ericponto]

My issues is then on the next page, how do I access those results without having the 'name' in that example.

[ericponto]

To clarify, I believe I would need to pass to the 'name' to useQueryState in order to retrieve it.

[markerikson]

That's really going to be up to you. Off the top of my head, you'd have to find some way to get that value from page A to page B, likely through whatever routing technique you're using, or perhaps keeping it in the store separately.

[ericponto]

Okay. Thank you for the replies! For now we are looking at storing that off in another slice.