Getting a fetch error using redux toolkit and RTK-Query

Question

I am using RTK-Query, and Redux-toolkit for this app, and I created an api-slice with createApi, as per the docs.

When I run a request to the backend, I get a "FETCH_ERROR"; however, when I run the same request using Axios, I get the data correctly from the backend, which leads me to believe I have an error in my code. I am just not sure where exactly it is.

Here is the error:

Object {
  "api": Object {
    "config": Object {
      "focused": true,
      "keepUnusedDataFor": 60,
      "middlewareRegistered": true,
      "online": true,
      "reducerPath": "api",
      "refetchOnFocus": false,
      "refetchOnMountOrArgChange": false,
      "refetchOnReconnect": false,
    },
    "mutations": Object {},
    "provided": Object {},
    "queries": Object {
      "test(undefined)": Object {
        "endpointName": "test",
        "error": Object {
          "error": "TypeError: Network request failed",
          "status": "FETCH_ERROR",
        },
        "requestId": "BWOuLpOxoDKTzlUYFLW4x",
        "startedTimeStamp": 1643667104869,
        "status": "rejected",
      },
    },
    "subscriptions": Object {
      "test(undefined)": Object {
        "QJSCV641RznGWyudGWuMb": Object {
          "pollingInterval": 0,
          "refetchOnFocus": undefined,
          "refetchOnReconnect": undefined,
        },
      },
    },
  },
  "test": Object {
    "data": Array [],
  },
}

Here is the test slice:

import { createSlice } from "@reduxjs/toolkit";

const testSlice = createSlice({
  name: "test",
  initialState: {
    data: [],
  },
  reducers: {
    getData: (state) => {
      state;
    },
  },
});

export const { getData } = testSlice.actions;
export default testSlice.reducer;

Here is the apiSlice:

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

export const apiSice = createApi({
  reducerPath: "test",
  baseQuery: fetchBaseQuery({ baseUrl: process.env.REACT_APP_backend_url }),
  endpoints: (builder) => ({
    test: builder.query({
      query: () => "/test",
    }),
  }),
});

export const { useTestQuery } = apiSice;

Well. The network request failed. Without sharing any code it's impossible to do more than read the error message to you. — phry
– phry, Commented Jan 31, 2022 at 22:40
I believe it was a problem with the env URL being incorrect. I had to clean cache and restart. Is this question still relevant to leave up? — Arcanus
– Arcanus, Commented Jan 31, 2022 at 23:12

Arcanus · Accepted Answer · 2022-02-12 05:13:22Z

4

I solved it by changing the backend URL to my current ipv4 (for expo development, otherwise just your whatever your backend URL is) address in my .env file, then deleting cache, and restarting my app. In my case I was using expo so, expo r -c, and it worked.

answered Feb 12, 2022 at 5:13

Arcanus

6909 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Adi · Accepted Answer · 2023-03-31 04:54:45Z

0

I solved by replacing my backend url http://localohost:6464 to the current ipv4 wi-fi network http://192.168.0.133:6464 you can find your ipv4 in wi-fi properties then restart the app with command: npm start --reset-cache or npx expo start -c

answered Mar 31, 2023 at 4:54

Adi

111 bronze badge

Comments

yanamala chaitanya · Accepted Answer · 2023-05-29 17:15:13Z

0

For Wi-Fi connection

Select Start > Settings > Network & internet > Wi-Fi and then select the Wi-Fi network you're connected to.

Under Properties, look for your IP address listed next to IPv4 address.

answered May 29, 2023 at 17:15

yanamala chaitanya

648 bronze badges

Collectives™ on Stack Overflow

Getting a fetch error using redux toolkit and RTK-Query

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related