RTK query doesn't fetch api data

Question

I'm using RTK query to fetch data from a local api server (build with Flask, a Python framework) and show in component. I cannot see data, data is always undefined.

I've this when running the console.log

useUsersQuery {data: undefined, error: undefined, isLoading: true, isSuccess: false} useUsersQuery {data: undefined, error: undefined, isLoading: true, isSuccess: false} useUsersQuery {data: undefined, error: undefined, isLoading: true, isSuccess: false} useUsersQuery {data: undefined, error: {…}, isLoading: false, isSuccess: false}

Here are my files:

userApi.js

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

export const userApi = createApi({
  reducerPath: 'usersApi',
  baseQuery: fetchBaseQuery({
    baseUrl: 'http://127.0.0.1:5000', // local server from Flask
    mode: 'no-cors'
  }),
  tagTypes: ['User'],
  endpoints: (builder) => ({
    users: builder.query({
      query: () => '/users',
      providesTags: ['User']
    }),
    addUser: builder.mutation({
      query: (user) => ({
        url: '/users',
        method: 'POST',
        body: user
      }),
      invalidatesTags: ['User']
    }),
    updateUser: builder.mutation({ 
      query: ({id, ...rest}) => ({
        url: `/users/${id}`,
        method: 'PUT',
        body: rest
      }),
      invalidatesTags: ['User']
    }),
    deleteUser: builder.mutation({
      query: (id) => ({
        url: `/users/${id}`,
        method: 'DELETE',
      }),
      invalidatesTags: ['User']
    })
  })
}) 

export const {
  useUsersQuery,
  useAddUserMutation,
  useUpdateUserMutation,
  useDeleteUserMutation
} = userApi

store.js

import { configureStore } from '@reduxjs/toolkit'
import { userApi } from '../store/apis/userApi'

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

userManager.js

import React from 'react';
import { useUsersQuery } from '../store/apis/userApi';

const UserManager = () => {
  const { data, error, isLoading, isSuccess } = useUsersQuery()

  console.log('useUsersQuery', useUsersQuery())
  
  const handleOK = () => {
    console.log('handleOK', data, error, isLoading, isSuccess)
  };

  return (
    <div>
      <button onClick={() => handleOK()}>OK</button>
    </div>
  )
}

export default UserManager;

Data is never fetched. Always have this in my console:

Answer 1

You are using mode: "no-cors" which prevents JavaScript from ever reading anything from your response.

From the docs:

[...] In addition, JavaScript may not access any properties of the resulting Response. [...]

You'll need to set CORS up correctly.