feat: refactor the cache

src/app/services/auth.js

@@ -33,11 +33,11 @@ export const authApi = createApi({
     }),
     //   获取openid
     getOpenid: builder.mutation({
-      query: ({ issuer_url, redirect_uri }) => ({
+      query: ({ issuer, redirect_uri }) => ({
         url: "/token/openid/authorize",
         method: "POST",
         body: {
-          issuer_url,
+          issuer,
           redirect_uri,
         },
       }),

src/app/services/base.query.js

@@ -1,73 +1,79 @@
-import { fetchBaseQuery } from '@reduxjs/toolkit/query';
-import toast from 'react-hot-toast';
-import { updateToken, clearAuthData } from '../slices/auth.data';
-import BASE_URL, { tokenHeader } from '../config';
-const whiteList = ['login', 'checkInviteTokenValid'];
+import { fetchBaseQuery } from "@reduxjs/toolkit/query";
+import toast from "react-hot-toast";
+import { updateToken, clearAuthData } from "../slices/auth.data";
+import BASE_URL, { tokenHeader } from "../config";
+const whiteList = ["login", "checkInviteTokenValid", "getServer", "getOpenid"];
 const baseQuery = fetchBaseQuery({
- baseUrl: BASE_URL,
- prepareHeaders: (headers, { getState, endpoint }) => {
-  console.log('req', endpoint);
-  const { token } = getState().authData;
-  if (token && !whiteList.includes(endpoint)) {
-   headers.set(tokenHeader, token);
-  }
-  // 发送channel msg (临时举措)
-  // if (endpoint == "sendChannelMsg") {
-  //   headers.set("Content-Type", "text/plain");
-  // }
-  return headers;
- }
+  baseUrl: BASE_URL,
+  prepareHeaders: (headers, { getState, endpoint }) => {
+    console.log("req", endpoint);
+    const { token } = getState().authData;
+    if (token && !whiteList.includes(endpoint)) {
+      headers.set(tokenHeader, token);
+    }
+    // 发送channel msg (临时举措)
+    // if (endpoint == "sendChannelMsg") {
+    //   headers.set("Content-Type", "text/plain");
+    // }
+    return headers;
+  },
 });
 const baseQueryWithReauth = async (args, api, extraOptions) => {
- let result = await baseQuery(args, api, extraOptions);
- if (result.error) {
-  console.log('api error', result.error);
-  switch (result.error.originalStatus) {
-   case 404:
-    {
-     toast.error('Request Not Found');
-    }
-    break;
-   case 500:
-    {
-     toast.error(result.error.data || 'server error');
-    }
-    break;
-   case 401:
-    {
-     // try to get a new token with refreshToken
-     const { token, refreshToken } = api.getState().authData;
-     const refreshResult = await baseQuery(
-      {
-       url: '/token/renew',
-       method: 'POST',
-       body: {
-        token,
-        refresh_token: refreshToken
-       }
-      },
-      api,
-      extraOptions
-     );
-     console.log({ refreshResult });
-     if (refreshResult.data) {
-      // store the new token
-      api.dispatch(updateToken(refreshResult.data));
-      // retry the initial query
-      result = await baseQuery(args, api, extraOptions);
-     } else {
-      toast.error('token expired, please login again');
-      api.dispatch(clearAuthData());
-     }
-    }
+  let result = await baseQuery(args, api, extraOptions);
+  if (result?.error) {
+    console.log("api error", result.error.originalStatus, api.endpoint);
+    switch (result.error.originalStatus || result.error.status) {
+      case 404:
+        {
+          toast.error("Request Not Found");
+        }
+        break;
+      case 500:
+        {
+          toast.error(result.error.data || "server error");
+        }
+        break;
+      case 401:
+        {
+          if (api.endpoint === "renew") {
+            toast.error("token expired, please login again");
+            api.dispatch(clearAuthData());
+            location.href = "/#/login";
+            return;
+          }
+          // try to get a new token with refreshToken
+          const { token, refreshToken } = api.getState().authData;
+          const refreshResult = await baseQuery(
+            {
+              url: "/token/renew",
+              method: "POST",
+              body: {
+                token,
+                refresh_token: refreshToken,
+              },
+            },
+            api,
+            extraOptions
+          );
+          console.log({ refreshResult });
+          if (refreshResult.data) {
+            // store the new token
+            api.dispatch(updateToken(refreshResult.data));
+            // retry the initial query
+            result = await baseQuery(args, api, extraOptions);
+          } else {
+            toast.error("token expired, please login again");
+            api.dispatch(clearAuthData());
+          }
+        }
 
-    break;
+        break;
 
-   default:
-    break;
+      default:
+        break;
+    }
   }
- }
- return result;
+  return result;
 };
 
 export default baseQueryWithReauth;

src/app/services/channel.js

@@ -1,5 +1,4 @@
 import { createApi } from "@reduxjs/toolkit/query/react";
-import { REHYDRATE } from "redux-persist";
 import toast from "react-hot-toast";
 import baseQuery from "./base.query";
 import { ContentTypes } from "../config";
@@ -12,11 +11,6 @@ import {
 export const channelApi = createApi({
   reducerPath: "channel",
   baseQuery,
-  extractRehydrationInfo(action, { reducerPath }) {
-    if (action.type === REHYDRATE) {
-      return action.payload ? action.payload[reducerPath] : undefined;
-    }
-  },
   refetchOnFocus: true,
   endpoints: (builder) => ({
     getChannels: builder.query({
@@ -84,11 +78,12 @@ export const channelApi = createApi({
         };
         dispatch(addPendingMessage({ type: "channel", msg: tmpMsg }));
         try {
-          const {
-            data: { gid, ...rest },
-          } = await queryFulfilled;
+          const { data: server_mid } = await queryFulfilled;
+          console.log("channel server mid", server_mid);
           // 此处的id，是指给谁发的
-          dispatch(addChannelMsg({ id: gid, ...rest, unread: false }));
+          dispatch(
+            addChannelMsg({ ...tmpMsg, mid: server_mid, unread: false })
+          );
           dispatch(removePendingMessage({ id, mid, type: "channel" }));
         } catch {
           console.log("channel message send failed");

src/app/services/contact.js

@@ -1,5 +1,4 @@
 import { createApi } from "@reduxjs/toolkit/query/react";
-import { REHYDRATE } from "redux-persist";
 import toast from "react-hot-toast";
 
 import baseQuery from "./base.query";
@@ -14,11 +13,6 @@ import {
 export const contactApi = createApi({
   reducerPath: "contact",
   baseQuery,
-  extractRehydrationInfo(action, { reducerPath }) {
-    if (action.type === REHYDRATE) {
-      return action.payload ? action.payload[reducerPath] : undefined;
-    }
-  },
   endpoints: (builder) => ({
     getContacts: builder.query({
       query: () => ({ url: `user` }),
@@ -96,9 +90,13 @@ export const contactApi = createApi({
         };
         dispatch(addPendingMessage({ type: "user", msg: tmpMsg }));
         try {
-          const { data } = await queryFulfilled;
+          // 走sse推送
+          const { data: server_mid } = await queryFulfilled;
+          // console.log("wtf", wtf);
           // 此处的id，是指给谁发的
-          dispatch(addUserMsg({ id, ...data, unread: false }));
+          dispatch(
+            addUserMsg({ id, ...tmpMsg, mid: server_mid, unread: false })
+          );
           dispatch(removePendingMessage({ id, mid, type: "user" }));
         } catch {
           toast.error("Send Message Failed");
@@ -115,6 +113,7 @@ export const {
   useUpdateInfoMutation,
   useUpdateAvatarMutation,
   useGetContactsQuery,
+  useLazyGetContactsQuery,
   useSendMsgMutation,
   useRegisterMutation,
 } = contactApi;

src/app/services/server.js

@@ -1,17 +1,11 @@
 import { createApi } from "@reduxjs/toolkit/query/react";
 import BASE_URL from "../config";
-// import { REHYDRATE } from 'redux-persist';
 
 import baseQuery from "./base.query";
 
 export const serverApi = createApi({
   reducerPath: "server",
   baseQuery,
-  // extractRehydrationInfo(action, { reducerPath }) {
-  //     if (action.type === REHYDRATE) {
-  //         return action.payload ? action.payload[reducerPath] : undefined;
-  //     }
-  // },
   endpoints: (builder) => ({
     getServer: builder.query({
       query: () => ({ url: `admin/system/organization` }),
@@ -78,6 +72,7 @@ export const {
   useGetAgoraConfigQuery,
   useUpdateAgoraConfigMutation,
   useGetServerQuery,
+  useLazyGetServerQuery,
   useUpdateServerMutation,
   useUpdateLogoMutation,
 } = serverApi;