Current RTK version and TypeScript

[AnnoDomine]

Hey folks.

While i tried to upgrade my rtk and saga setup with saga-query i had some problems but could solv them.
My experience i want to share with you.

RTK configureStore (instead using depricated createStore):

the store buildup is a little bit other in the current version than befor.
"createStore" is depricated and should not use anymore.
First i hab problems to inject the saga-query prepaired store into the current store.
But i figured out that you can inject the prepaired store with the current reducers without setting up the slices with saga-query:

prepairedStore.ts

export const prepaired = prepareStore({
    reducers: {
        project: projectSlice.reducer,
        content: contentReducer,
        loading: loadingReducer,
        theme: themeReducer,
        tab: tabReducer,
    },
    sagas: { projectApi: fetchApi.saga() },
    onError: (err) => console.log(err),
});

store.ts

const safeMiddleware = (gDM: CurriedGetDefaultMiddleware) =>
    process.env.NODE_ENV === "production"
        ? gDM().concat(sagaMiddleware, ...prepaired.middleware)
        : gDM().concat(sagaMiddleware, logger, ...prepaired.middleware);

export const store = configureStore({
    reducer: prepaired.reducer,
    devTools: process.env.NODE_ENV !== "production",
    middleware: safeMiddleware,
});

As you see my project reducer is build with saga-query and the rest are direct imports of the slices.

TypeScript:

This was a little bit strange youse the basic RootState type which documented in RTK-documentation is with saga-query in this form not posible.
But there is an easy answer.
Instead of using typeof store use the prepaired store reducers.

export type RootState = ReturnType<typeof prepaired.reducer>;

So the types are correct again.
I hope i could give a few hinds for possible problems to someone who had the same problems than me.
Spezialy when you add saga-query into an almost builded project.

I hope the contributer will finish this project.

Greetz

[VldMrgnn]

Hello @AnnoDomine,
It seems that you solved the issue and it's a good thing to point out the way you did it.
Following your example, a possible setup could look something like:

preparedStore.ts

export const reducers = {
        project: projectSlice.reducer,
        content: contentReducer,
        loading: loadingReducer,
        theme: themeReducer,
        tab: tabReducer,
    };
	
export const prepared  = prepareStore({
  reducers,
   sagas: { projectApi: fetchApi.saga() }, 
   onError: (err) => console.log(err), 
  });
  

store.ts

const sagaMiddleware = createSagaMiddleware({});
safeMiddleware = ... //your middlewares

function setupStore() {
const store = configureStore({
    reducer: prepared.reducer,
    devTools: process.env.NODE_ENV !== "production",
    middleware: safeMiddleware,
   }); 
   prepared.run();
   return store;
}

const store = setupStore();
const persistor = persistStore(store);

export function AppSore({ children }) {
 sagaMiddleware.run(rootSaga); // other sagas you may have, in the existing project
 return (
   <Provider store={store}>
      <PersistGate persistor={persistor}>
        {children}
     </PersistGate>
   </Provider>
 );
}

export type PersistorState = ReturnType<typeof persistor.getState>;
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch &
 ((actions: AnyAction[]) => AnyAction[]);

I am sure that there could be an even cleaner way to setup an existent codebase made with RTK and/or Robodux as well.

[AnnoDomine]

Hey Vlad. Thanks for the review ^^
I like youre way and gona cleanup my code 👍
I hope i can give you here an idea i had while i tried something out.

Would it possible to implement something as an interceptor like from axios.
As an example:
To hold the response when you do a api call with tokens and when the token is depricated you do a new call to the api to get a new token and repeat the call befor.

as example a code like this:

const eample = createApi<ApiCtx>();

example.interceptor(
    [
        function* (next, saga, res)  
            {
            if (res.status === 402)  // or the error code from BE to say not authorised couse token invalid
                {
                const response = yield fetch....    // fetch to get new token
                yield put(......, response) // save new token in store or localStorage or whereever
                yield saga.refetch;
            } else next();
        }
    ]    

Additional:
I tried to declare the store and RootState like you above and get the same type error as befor.
The type of RootState is any. :(

[VldMrgnn]

Hey Dominic,
Actually the correct RootState should be the one you provided:

export type RootReducer = ReturnType<typeof  prepared.reducer>;

Regarding the axios interceptor, I think that is a very good use-case for the saga-query to show it's versatility.
The construction you described above can be done in various ways.
You could define the logic inside the saga, or if you have many endpoints then it would be better to write a middleware to intercept the response and act accordingly.
If you need further assistance I'll be glad to help.

[AnnoDomine]

@VldMrgnn okay. I have a good news and i have a problem ^^

First of all the good things.
I could create an interceptor.

interface IError {
   errors: {
       message: string;
       locations: {
           line: number;
           column: number;
       }[];
       path: string[];
       extensions: {
           code: string;
           http: {
               status: number;
           };
           exception: {
               message: string;
               stacktrace: string[];
           };
       };
   }[];
}

const headers = {
   Accept: "application/json, text/plain, */*",
   "Content-Type": "application/json",
   "Access-Control-Allow-Origin": `${window.location.hostname}`,
   Authorization: window.localStorage.getItem("token") || "",
};

function* replaceJWT() {
   yield putResolve(getJWT());
}

function* startRefetch<P = Record<string, never>, S extends IError = IError, E extends IError = IError>(
   refetch: CreateAction<ApiCtx<P, S, E>> | CreateActionWithPayload<ApiCtx<P, S, E>, P>,
   args: P
) {
   yield put(refetch(args));
}

function* interceptor<P = Record<string, never>, S extends IError = IError, E extends IError = IError>(
   data: (ApiFetchSuccess<S> | ApiFetchError<E>)["data"],
   refetch: CreateAction<ApiCtx<P, S, E>> | CreateActionWithPayload<ApiCtx<P, S, E>, P>,
   args: P
) {
   if (data.errors.find((err) => err.extensions.http.status === 402)) {
       yield replaceJWT();
       yield delay(1000); // here is my problem!!! startRefetch hits befor JWT is changes inside localStorage
       yield startRefetch(refetch, args);
   }
   return;
}

const getJWT = fetchApi.post("JWT", function* (ctx: ApiCtx, next) {
   ctx.request = ctx.req({
       url: "",
       body: JSON.stringify({
           query: "{generateJWT { jwt }}",
       }),
   });
   yield next();
   yield window.localStorage.setItem("token", ctx.json.data.data.generateJWT.jwt); // write into localStorage
});

const testError: CreateActionWithPayload<ApiCtx, { reruned: boolean }> = fetchApi.post<{ reruned: boolean }>(
   `testError`,
   function* (ctx: ApiCtx<{ reruned: boolean }, IError, IError>, next) {
       ctx.request = ctx.req({
           url: "",
           body: JSON.stringify({
               query: "{testError { status }}",
               variables: {},
           }),
           headers,
           method: "post",
       });
       yield next();

       if (!ctx.json.ok) {
           return;
       }

       const data: (ApiFetchSuccess<IError> | ApiFetchError<IError>)["data"] = yield ctx.json.data;

       if (!ctx.payload.reruned) // should only hits once or i get an infinity loop ^^ is only for testing
           yield interceptor<{ reruned: boolean }, IError, IError>(data, testError, { reruned: true });
   }
);

In the code above you see i commented the problem i have.

I need to delay the refetch with 1 sec -.-
i dont think that is realy the correct way ^^

[VldMrgnn]

How is fetchApi defined in your code?

[AnnoDomine]

import { ApiCtx, createApi, fetcher, requestMonitor } from "saga-query";

const fetchApi = createApi<ApiCtx>();

fetchApi.use(requestMonitor());

fetchApi.use(fetchApi.routes());

fetchApi.use(
    fetcher({
        baseUrl: process.env.NODE_ENV === "production" ? "XXXXXXX" : "http://localhost:4000/api",
    })
);

export default fetchApi;

[VldMrgnn]

Hello @AnnoDomine,
Please take a look at the readme file here
As an example you could write something like this:

export const fetchApi = createApi();
fetchApi.use(requestMonitor());
fetchApi.use(fetchApi.routes());
fetchApi.use(errorHandler);
fetchApi.use(fetcher({ baseUrl: service }));

const getJWT = fetchApi.post('JWT', function* (ctx: ApiCtx, next) {
  ctx.request = ctx.req({
    url: '/select/getJWT',
    body: JSON.stringify({
      query: '{generateJWT { jwt }}',
    }),
  });
  yield next();
  const data = yield ctx.json.data;
  console.log('JWT', data)
});

export const testError: CreateActionWithPayload<ApiCtx, { reruned?: number }> =
  fetchApi.post<{ reruned?: number }>(
    'testError',
    function* (ctx: ApiCtx<{ reruned?: 0 }, IError, IError>, next) {
      ctx.request = ctx.req({
		url: '/select/testError',
        body: JSON.stringify({
          query: '{testError { status }}',
          variables: {},
        }),
        headers,
        method: 'post',
      });
      yield next();

      if (ctx.payload.reruned < 5 && ctx.response.status === 402) {
        const JWT = yield call(getJWT.run, getJWT());
        if (!JWT.json.ok) {
          yield console.log('JWT error', JWT);
          return;
        }

        yield call(
          testError.run,
          testError({ reruned: ++ctx.payload.reruned }),
        );
        return;
      }

      if (ctx.response.status === 402) {
        yield console.log('reruned 5 times');
        return;
      }

      const data = yield ctx.json.data;
      console.log('data', data);
    },
  );

Hope it helps

[VldMrgnn]

Or you can extract a middleware and use it for all your requests

function* interceptJWT(ctx: ApiCtx, next: Next) {
  yield next();
  if (ctx.payload?.reruned < 5 && ctx.response.status === 402) {
    const JWT = yield call(getJWT.run, getJWT());
    if (!JWT.json.ok) {
      yield console.log('JWT error', JWT);
      return;
    }

    yield call(testError.run, testError({ reruned: ++ctx.payload.reruned }));
    return;
  }

  if (ctx.response.status === 402) {
    yield console.log('reruned 5 times');
    return;
  }
}

export const fetchApi = createApi();
fetchApi.use(requestMonitor());
fetchApi.use(fetchApi.routes());
fetchApi.use(errorHandler);
fetchApi.use(interceptJWT);
fetchApi.use(fetcher({ baseUrl: service }));

const getJWT = fetchApi.post('JWT', function* (ctx: ApiCtx, next) {
  ctx.request = ctx.req({
    url: '/select/getJWT',
    body: JSON.stringify({
      query: '{generateJWT { jwt }}',
    }),
  });
  yield next();
  const data = yield ctx.json.data;
  console.log('JWT', data);
});

export const testError: CreateActionWithPayload<ApiCtx, { reruned?: number }> =
  fetchApi.post<{ reruned?: number }>(
    'testError',
    function* (ctx: ApiCtx<{ reruned?: 0 }, IError, IError>, next) {
      ctx.request = ctx.req({
        url: '/select/testError',
        body: JSON.stringify({
          query: '{testError { status }}',
          variables: {},
        }),
        headers,
        method: 'post',
      });
      yield next();
      const data = yield ctx.json.data;
     // do something with data
    },
  );

[AnnoDomine]

It helps a lot ^^

I found an answer by myself with a JS fetch and youre answer helps me to shrink the code :P

I added a generic type which i can set as the action payload to the actions

type TIntercepted<P> = P & {
    newJWT?: string;
};

// headers is now a return with jwt as prop.
// it inject jwt on highest level in "Authorization".
// if jwt is undefined it takes the token form localStorage.
const headers = (jwt?: string) => {
    return {
        Accept: "application/json, text/plain, */*",
        "Content-Type": "application/json",
        "Access-Control-Allow-Origin": `${window.location.hostname}`,
        Authorization: jwt || window.localStorage.getItem("token") || "",
    };
};

function* replaceJWT() {
    const jwt: ApiCtx<Record<string, never>, TRefetchedJWTResponse, Record<string, never>> = yield call(
        getJWT.run,
        getJWT()
    );
    if (!jwt.json.ok) throw Error("Something is strange with the connection to the API.");
    return jwt.json.data.data.generateJWT.jwt;
}

function* startRefetch<P = Record<string, never>, S extends IError = IError, E extends IError = IError>(
    refetch: CreateAction<ApiCtx<P, S, E>> | CreateActionWithPayload<ApiCtx<P, S, E>, P>,
    args = {} as TIntercepted<P>
) {
    yield put(refetch(args));
    return;
}

function* interceptor<P = Record<string, never>, S extends IError = IError, E extends IError = IError>(
    data: (ApiFetchSuccess<S> | ApiFetchError<E>)["data"],
    refetch: CreateAction<ApiCtx<P, S, E>> | CreateActionWithPayload<ApiCtx<P, S, E>, P>,
    args: TIntercepted<P>
) {
    if (data.errors.find((err) => err.extensions.http.status === 402)) {
        const newJWT: string = yield replaceJWT();
        yield startRefetch(refetch, { ...args, newJWT });
    }
    return;
}

const testError: CreateActionWithPayload<ApiCtx, TIntercepted<{ reruned: boolean }>> = fetchApi.post<
    TIntercepted<{ reruned: boolean }>
>(`testError`, function* (ctx: ApiCtx<TIntercepted<{ reruned: boolean }>, IError, IError>, next) {
    ctx.request = ctx.req({
        url: "",
        body: JSON.stringify({
            query: "{testError { status }}",
            variables: {},
        }),
        headers: headers(ctx.payload.newJWT),
        method: "post",
    });
    yield next();

    if (!ctx.json.ok) {
        console.log(ctx.json);
        return;
    }

    const data: (ApiFetchSuccess<IError> | ApiFetchError<IError>)["data"] = yield ctx.json.data;

    if (!ctx.payload.reruned)
        yield interceptor<TIntercepted<{ reruned: boolean }>, IError, IError>(data, testError, { reruned: true });
});

With this solution i stay mor generic with the interceptor.

So much thanks for youre help 👯