RTK Query Error returning my own html and not the API response

Viewed 15

In my project I'm using Redux Toolkit Query to fetch data from an API. And when I use it on my component it gives me PARSIN_ERROR, because it is returning me my own html base template and not the API response...
This is my service code.

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

const cryptoApiHeaders = {
  'X-RapidAPI-Key': process.env.CRYPTO_API_KEY,
  'X-RapidAPI-Host': process.env.CRYPTO_API_HOST,
};

const createRequest = (url) => ({
  url,
  headers: cryptoApiHeaders,
});

export const CryptoApi = createApi({
  reducerPath: 'CryptoApi',
  baseQuery: fetchBaseQuery({ baseUrl: process.env.CRYPTO_API_URL }),
  endpoints: (builder) => ({
    getCryptos: builder.query({
      query: (count) => createRequest(`/coins?limit=${count}`),
    }),
    getCryptoById: builder.query({
      query: (coin_uuid) => createRequest(`/coin/${coin_uuid}`),
    })
  })
});

export const {
  useGetCryptosQuery,
  useGetCryptoByIdQuery
} = CryptoApi

This is my Store code.

import { configureStore } from "@reduxjs/toolkit"

import { CryptoApi } from "../Services/CryptoApi"

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

Here I inject the Provider.

import { store } from './app/store'

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <Provider store={store}>
        <App />
      </Provider>
    </BrowserRouter>
  </React.StrictMode>
);

Here is where i call it in the component

import { useGetCryptosQuery } from '../Services/CryptoApi';

const Home = () => {

  const { data, error, isLoading } = useGetCryptosQuery(10);

  return (
    <>
      {
        error ? (
            console.error(error.error)
          )
        :
        isLoading ? (
          console.log(isLoading)
        )
        :
        data ? (
          console.log('Passed: ', data)
        ) : null
      }
    </>
  )
}

export default Home;

And this is the response enter image description here

As you can see, it is returning my own html template in the error... I'm working on this all day and yet don't know how to solve it...

OBS: all the env properties are correctly formatted.

0 Answers
Related