RTKQ: Get loading state of a single mutation in different components

[EliseyMartynov]

Hello! I've a following problem:

• Imagine we have some POST mutation hook to an endpoint in a X component that's inside Y component.
• The problem: I can get a loading state of the mutation in X - where it has been called - but I can't access this loading state in Y. That's feeling like a really disadvantage because it's a really regular case when you need to get a loading state of a single mutation in different components.
• I've already read that a mutation is unique and doesn't share data between different components. But there is no solution for that regular case? I know we can store some loading field in Redux and dispatch it in a mutation but... hey, I go for RTKQ because I don't want any loading fields in my Redux.

Thank you in advance! :)

[phryneas]

This is currently being worked on in #1477 and will be possible in the next minor release.

[EliseyMartynov]

This is currently being worked on in #1477 and will be possible in the next minor release.

@phryneas Thank you very much for a such quick replying me as always! :) Could you maybe please tell me if that's possible - how long it could take for the next minor release?

[phryneas]

I assume somewhere around the 1-2 months mark, but I can't tell 100%. A lot going on atm.

You can try #1477 already if you want to, but there will be some bugs or race conditions with it at this point I still have to fix.

Installation instructions are in the CodeSandbox build page.

With that, you would use it like

const [trigger, result] = useMyMutation({ fixedCacheKey: "myCacheKey" })

That cache key would be shared over components and never cleaned up, so the result would stay around until you call either result.reset() or trigger another mutation with the same cache key.

[EliseyMartynov]

@phryneas We've caught a strange behavior with your current PR when we use a mutation in one component and in another component we get reset field undefined and also originalArgs undefined. We really need reset field because it does the work for us.

To reproduce:

• The sandbox to test it
• click Post Foo button and open the console.

[phryneas]

@magistrfox Whoa, good catch, thank you!

Coincidentally there is a TODO in #1277 that will make it possible to solve this, but it might take some time untangling everything that is going on here.

[KodeDino]

Hi, I am facing a similar problem as well, I have tried the cached key but it is returning a typescript error. For my end, I am implementing a search form, within the search form component I am calling to fetch data from the backend, and in some other component, I need to display the data fetched from the search form component. Currently, I am not able to accomplish this using RTKQ, is there any way other than using the cached key that could accomplish this? I am thinking that perhaps I could try creating a slice to store the data and use it across the project?

[phryneas]

@XiyuChen-95 have you also installed the experimental build of RTKQ as stated?

Generally: no, in the current RTKQ version there is nothing else you can do except move the hook call up to a common parent and passing everything to both components via props.

[KodeDino]

@phryneas yea, I installed the experimental build from the codesandbox build page, and it is giving me an error of below:

Argument of type '{ fixedCacheKey: string; }' is not assignable to parameter of type 'UseMutationStateOptions<MutationDefinition<QueryParamType, BaseQueryFn<string | FetchArgs, unknown, FetchBaseQueryError, {}, FetchBaseQueryMeta>, never, RosbagType[], "rootApi">, ({ ...; } & { ...; }) | ... 2 more ... | ({ ...; } & ... 2 more ... & { ...; })>'. Object literal may only specify known properties, and 'fixedCacheKey' does not exist in type 'UseMutationStateOptions<MutationDefinition<QueryParamType, BaseQueryFn<string | FetchArgs, unknown, FetchBaseQueryError, {}, FetchBaseQueryMeta>, never, RosbagType[], "rootApi">, ({ ...; } & { ...; }) | ... 2 more ... | ({ ...; } & ... 2 more ... & { ...; })>'

[KodeDino]

Seems like the solution for now (other than the experimental build) would be to combine RTKQ with Toolkit by creating a slice and store the fetched data into the state, and grab the piece of state by using the selector hook in another component.

[phryneas]

@XiyuChen-95 that's super weird, if you try it in this CodeSandbox the typings do work.
The only thing I can think about is that you maybe have multiple versions of the library installed - other than that I can't really help without a reproduction, sorry :(

[KodeDino]

@phryneas Actually, that you mentioned with the library installation, I went to check my dependencies and found that the build isn't installed correctly. Just to make sure if I did the installation process correctly I did the command below:
yarn add https://pkg.csb.dev/reduxjs/redux-toolkit/commit/4b389bff/@reduxjs/toolkit https://pkg.csb.dev/reduxjs/redux-toolkit/commit/4b389bff/@rtk-query/graphql-request-base-query

and the error for installation I've got is as below:

error An unexpected error occurred: "https://pkg.csb.dev/reduxjs/redux-toolkit/commit/4b389bff/@rtk-query/graphql-request-base-query: Request failed \"404 Not Found\"".

[markerikson]

@XiyuChen-95 I don't think you need to be installing the graphql-request-base-query package, do you?

[KodeDino]

@markerikson I copied the yarn install command from the build instruction directly. I thought that the graphql package is needed. So an installation of the package is done. Weird thing is that I am still getting the typescript error as above. The dependency under my json file shows

    "@reduxjs/toolkit": "https://pkg.csb.dev/reduxjs/redux-toolkit/commit/4b389bff/@reduxjs/toolkit",
    "@rtk-incubator/rtk-query": "^0.3.0",

I wonder if it's bugged so I reopened my entire vsc, and even copied the test mutation from the CodeSandbox. But no luck.

[markerikson]

@XiyuChen-95 The GraphQL package exists in the RTK repo, so it's probably being built as part of the CSB. But, it doesn't sound like you're using it, so you shouldn't try to install it.

Also, the @rtk-incubator/rtk-query package is very obsolete - that's the early alpha version of RTK Query, before we moved the code into RTK itself. You should uninstall that.

[KodeDino]

@markerikson Thanks for the explanation and advise, I will uninstall the @rtk-incubator/rtk-query package and try to see if the fixedCachedKey property works, otherwise I will try using entity or slice to share the data in another component