scripter
scripter

Reputation: 1561

rtk-query mutation rejected

am testing rtk-query in one of my projects and there's a problem that i don't understand when the website load for the first time query work and the data get received however when i try to update or create anything i get in redux dev tools mutation status rejected but when i refresh the website and i try again it work so the problem occur only when the website load for the first time and this is my code

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

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

const auth = JSON.parse(localStorage.getItem('auth'));

export const crudApi = createApi({
  baseQuery: fetchBaseQuery({
    baseUrl: import.meta.env.VITE_APP_API,
    // prepareHeaders: (headers) => {
    //   console.log(headers);
    // },
  }),
  endpoints: (builder) => ({
    getList: builder.query({
      query: (path) => ({
        url: `${path}/list`,
      }),
    }),
    checkCopon: builder.mutation({
      query: (code) => ({
        url: `copon/check`,
        body: { code },
        method: 'POST',
      }),
    }),
    filterDishes: builder.mutation({
      query: (tags) => ({
        url: `dish/filter`,
        body: { tags },
        method: 'POST',
      }),
    }),
    getTodaysOrders: builder.query({
      query: () => ({
        url: `order/todayList`,
        body: { today: true },
        method: 'POST',
      }),
    }),
    getSingle: builder.query({
      query: ({ path, id }) => {
        console.log(path, id);
        return {
          url: `${path}/get`,
          body: { id },
          method: 'POST',
        };
      },
    }),
    listOrderByUser: builder.query({
      query: (id) => {
        console.log(id);
        return {
          url: `order/listByUser`,
          body: { id },
          method: 'POST',
        };
      },
    }),
    docUpdate: builder.mutation({
      query: (body) => {
        console.log(body);
        return {
          url: `${body.path}/update`,
          body: body,
          method: 'POST',
          headers: {
            Authorization: 'Bearer ' + auth.token,
          },
        };
      },
    }),
    Add: builder.mutation({
      query: (body) => {
        console.log(body);

        return {
          url: `${body.path}/add`,
          body: body,
          method: 'POST',
          headers: {
            Authorization: 'Bearer ' + auth.token,
          },
        };
      },
    }),
    Delete: builder.mutation({
      query: (body) => {
        console.log(body);
        console.log(`${body.path}/delete`);
        return {
          url: `${body.path}/delete`,
          body: { ids: body.ids },
          method: 'POST',
        };
      },
    }),
  }),
});

// Export hooks for usage in functional components
export const {
  useListOrderByUserQuery,
  useGetListQuery,
  useGetSingleQuery,
  useDocUpdateMutation,
  useDeleteMutation,
  useAddMutation,
  useGetTodaysOrdersQuery,
  useCheckCoponMutation,
  useFilterDishesMutation,
} = crudApi;

if anyone can help ill be thankful i don't want to rewrite all the code to fix it

Upvotes: 2

Views: 5059

Answers (1)

phry
phry

Reputation: 44344

A rejected action in the devtools, can mean a lot of things, including "we don't need to make a new request for this data as it is already in the cache".

You will get more information by inspecting that action further (especially action.meta - if action.meta.condition is true, then it is as I said and there was just no need for a new request) or just look at the error you got back from calling your hook.

But without more information about the error (if there is one), it's impossible to say more.

Upvotes: 3

Related Questions