RTK Queryでアクセストークンが無効になった場合のインターセプターを構築しようとしています。ドキュメントの例で作成したので、次のようになります。
const baseQuery = fetchBaseQuery({
baseUrl: BASE_URL,
prepareHeaders: (headers, { getState }) => {
const {
auth: {
user: { accessToken },
},
} = getState() as RootState;
if (accessToken) {
headers.set('authorization', `Bearer ${accessToken}`);
}
return headers;
},
});
const baseQueryWithReauth: BaseQueryFn<string | FetchArgs, unknown, FetchBaseQueryError> = async (
args,
api,
extraOptions
) => {
let result = await baseQuery(args, api, extraOptions);
if (result.error && result.error.status === 401) {
const refreshResult = await baseQuery('token/refresh/', api, extraOptions);
if (refreshResult.data) {
api.dispatch(tokenUpdated({ accessToken: refreshResult.data as string }));
// retry the initial query
result = await baseQuery(args, api, extraOptions);
} else {
api.dispatch(logout());
}
}
return result;
};
export const baseApi = createApi({
reducerPath: 'baseApi',
baseQuery: baseQueryWithReauth,
endpoints: () => ({}),
});
問題は、 がリフレッシュ トークンをtoken/refresh/
含むリクエストを予期していて、この行を再構築してパラメータを受け入れてリクエストを行うPOST
方法がわからないことです。const refreshResult = await baseQuery('token/refresh/', api, extraOptions);
POST