Is RTKQ designed for forms submission?

[robertwt7]

Hey Guys,

I'm very new to RTK and RTKQ, but i've been using thunk and saga for a while now.

I am very confused with the use case of RTKQ for form submissions

the docs mentioned:

RTK Query is a powerful data fetching and caching tool. It is designed to simplify common cases for loading data in a web application, eliminating the need to hand-write data fetching & caching logic yourself.

Does this mean that it is only designed for data fetching? I reckon we can use mutation for posting stuff for form data, however what's the need for caching for that? I'm confused if I should use createAsyncThunk again for my forms or just stick to RTKQ. However I feel like creating 1 createAPI({}) is the best practice recommended here.

Can anyone please help explain to me?

Thanks

Edit:

There's an example provided already in the docs!! I should have read it. Thanks for the great docs

https://redux-toolkit.js.org/rtk-query/usage/mutations

[phryneas]

Well, you want to "cache" that as long as you want to display it on the same page.

RTK will by default clean out mutation results after the component triggering them unmounts or triggers a new mutation.

[robertwt7]

Thanks for your reply!

I already tried to implement this yesterday with mutation and it works. I'm confused for the use case of caching though, what is being cached if the form is submitted as a post request where the response is only 200 without body?

edit:
I understand some use case where the form submission PUT and returns the result as a body

[phryneas]

You are overthinking "caching" here. Think of "caching" as "keeping the result in memory so you can use it in the next render to display it to the user".

[robertwt7]

yeah you're right, I overthink cache by thinking "which" one to cache and not to cache. I guess that make sense to let RTKQ handles everything.

Thanks for the clarification.

Would love to see some real life use cases for form submissions to see if i implemented it correctly with mutation though if there're any from the community

[robertwt7]

Apologies, actually you did create an example in the mutation page!

   addPost: build.mutation<Post, Partial<Post>>({
      query(body) {
        return {
          url: `post`,
          method: 'POST',
          body,
        }
      },
      // Invalidates all Post-type queries providing the `LIST` id - after all, depending of the sort order,
      // that newly created post could show up in any lists.
      invalidatesTags: [{ type: 'Posts', id: 'LIST' }],
    }),