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;
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.
