Tips for defining the anticipated server response solely based on status and cookie

Question

Tips for defining the anticipated server response solely based on status and cookie

I am using Redux Toolkit Query to occasionally refresh the jwt token:

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";

export const refreshApi = createApi({
  reducerPath: "apiSlice",
  baseQuery: fetchBaseQuery({
    baseUrl: `${process.env.NEXT_PUBLIC_SERVER_URL}`,
    credentials: "include",
  }),
  endpoints: (builder) => ({
    refreshAuthorization: builder.query({
      query: () => "/api/auth/refresh",
    }),
  }),
});

export const { useRefreshAuthorizationQuery } = refreshApi;

This is the response I expect from my server:

    return res
        .cookie("accessToken", accessToken, {
           httpOnly: true,
           secure: config.get("isSecure"),
           sameSite: "none",
      })

However, I encountered this error: https://i.sstatic.net/bNkwB.png

It appears that the front-end is expecting JSON but I am only returning a status.

typescript rest next.js cookies redux-toolkit

Answer 1

Answer №1

Indeed, the fetchBaseQuery function in Redux-Toolkit Query assumes JSON responses by default. It seems that the cookie response content type is "text/html." To handle this, you can customize the response handler for specific endpoints.

Here's an example:

export const refreshApi = createApi({
  reducerPath: "apiSlice",
  baseQuery: fetchBaseQuery({
    baseUrl: `${process.env.NEXT_PUBLIC_SERVER_URL}`,
    credentials: "include",
  }),
  endpoints: (builder) => ({
    refreshAuthorization: builder.query({
      query: () => ({
        url: "/api/auth/refresh",
        responseHandler: "text",
        // or
        // responseHandler: response => response.text();
      }),
    }),
  }),
});

For more information, you can refer to Individual Query Options, specifically Parsing a Response.

Answer 2

Indeed, the fetchBaseQuery function in Redux-Toolkit Query assumes JSON responses by default. It seems that the cookie response content type is "text/html." To handle this, you can customize the response handler for specific endpoints.

Here's an example:

export const refreshApi = createApi({
  reducerPath: "apiSlice",
  baseQuery: fetchBaseQuery({
    baseUrl: `${process.env.NEXT_PUBLIC_SERVER_URL}`,
    credentials: "include",
  }),
  endpoints: (builder) => ({
    refreshAuthorization: builder.query({
      query: () => ({
        url: "/api/auth/refresh",
        responseHandler: "text",
        // or
        // responseHandler: response => response.text();
      }),
    }),
  }),
});

For more information, you can refer to Individual Query Options, specifically Parsing a Response.

Tips for defining the anticipated server response solely based on status and cookie

Answer №1

Similar questions

Is there a way to omit type arguments in TypeScript when they are not needed?

Join the Observable and formControl in Angular 4 by subscribing

Having trouble with CSRF validation while using Django Rest and Vue.js with Axios?

Exploring the possibility of integrating direct search functionality into the URL bar within an Angular application

The functionality of TypeScript's instanceof operator may fail when the method argument is not a simple object

The metadata for Company#companyTypesLinks could not be located. Please verify that the entity object has been correctly specified

Challenges in Power BI Custom Visual Development: Trouble setting height for div elements

Looking for a way to activate a button that triggers the drag animation (translateX) for card demonstrations?

The exploration of child routes and modules

An error occurred while trying to create a new instance using prisma.model.create. The argument `school_id` provided in data.subjects.create.2.school_id is not recognized for

How can we add a key:value pair at a specific position in an array in Angular 2 using Typescript?

Tips for setting up a full-size image with nextJS and the <Image /> component

What are the steps to avoid TypeScript from automatically installing and referencing its own @types in the AppDataLocal directory?

typescript provides an asynchronous recursive mapping function that allows for changing parent data starting from the leaf node

What's the best way to implement asynchronous state updating in React and Redux?

A guide on activating the <b-overlay> component when a child triggers an Axios request in vue.js

Error: The property 'count' cannot be destructured from '(0, react_redux__WEBPACK_IMPORTED_MODULE_3__.useSelector)(...)' because it is not defined

Error: 'Target is not found' during React Joyride setup

Steps for activating the read-only input field

Issue detected: Props that are of type Object/Array must utilize a factory function in order to provide the default value