How to access data from mutation request response after redirect?

159 Views Asked by At

I am setting up the creation of a new user and email verification for my application. So for sign up request I'm using query mutation and in the response from the server I'm getting the data of the created user: name, email, id. I can access this data in my SignUp component using data from my useSignUpMutation() hook. But then if the request is fine I'm doing redirect to a Verification component that shows standard "check your email please" text. I'm redirecting there with <Navigate /> from react-router-dom. So now I want to access that same data from that useSignUpMutation() operation in another component, but I can't. The data is just undefined there. I of course can create a slice for that data and just save with that slice, but I don't want to add extra complexity for such a small operation. I also can do Verification as a pop up module so I don't need to redirect from that page. But is there a way access that data from another page?

My signUp component:

export const SignUpPage = () => {
  const [signUp, { data }] = useSignUpMutation();

  console.log(data); // gives me data

  if (data) {
    return <Navigate to="/confirm-email" />;
  }

  return (
    <Page>
      <SignUp onSubmit={signUp} />
    </Page>
  );
};

My verification component ( I need to get the data here)

export const SendConfirmation = () => {
  const [resendVerification] = useResendVerificationMutation();
  const [signUp,  { data }] = useSignUpMutation();

  console.log(data); // data is undefined

  const handleResendVerification = () => {
    resendVerification({});
  };

  return (
    <Page>
      <Card className={s.modal}>
        <Button type="button" onClick={handleResendVerification}>
          Resend verification letter
        </Button>
      </Card>
    </Page>
  );
};

So I guess the things is that when I redirect to another page, RTK doesn't see that data from the last response as valid. So the question is how to access invalid cache in this case?

store

import { configureStore } from "@reduxjs/toolkit";

import { baseApi } from "./base-api";

export const store = configureStore({
  reducer: {
    [baseApi.reducerPath]: baseApi.reducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(baseApi.middleware),
});

export type AppDispatch = typeof store.dispatch;
export type RootState = ReturnType<typeof store.getState>;

base api:

export const baseApi = createApi({
  reducerPath: "baseApi",
  tagTypes: ["Decks", "Auth"],
  baseQuery: baseQueryWithReauth, (it's a huge chunk of code from redux docs)
  endpoints: () => ({}),
});

Service with injected endpoints:

import { baseApi } from "../base-api";

export const AuthService = baseApi.injectEndpoints({
  
  endpoints: (builder) => {
    return {
      authMe: ... ,
      login: ...,
      logout: ...,
      signUp: builder.mutation<SignUpResponseType, SignUpArgsType>({
        query: (body) => ({
          url: "v1/auth/sign-up",
          method: "POST",
          body,
        }),
        // invalidatesTags: ["Auth"],
      }),
      verifyEmail: ... ,
      resendVerification: ...,
  },
});

So I ended up passing the data through state object of react-router-dom navigate method and then accessing it with useLocation hook

0

There are 0 best solutions below