Trouble fetching data from Rapid API using Redux

Other Questions RapidAPI
1

Hey everyone, I’m stuck trying to get data from Rapid API with Redux. When I log the data, I keep seeing a 401 Unauthorized error. Can anyone help me figure out what’s going wrong?

Here’s a snippet of my setup:

// store.js
import { configureStore } from '@reduxjs/toolkit'
import { coinDataApi } from '../services/coinDataApi'

const store = configureStore({
  reducer: {
    [coinDataApi.reducerPath]: coinDataApi.reducer,
  },
})

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

const coinApiHeaders = {
  'X-CoinAPI-Host': 'coindatabase.p.rapidapi.com',
  'X-CoinAPI-Key': 'your-api-key-here'
}

const apiUrl = 'https://coindatabase.p.rapidapi.com/coins'
const buildRequest = (endpoint) => ({ url: endpoint, headers: coinApiHeaders })

export const coinDataApi = createApi({
  reducerPath: 'coinDataApi',
  baseQuery: fetchBaseQuery({ baseUrl: apiUrl }),
  endpoints: (builder) => ({
    getAllCoins: builder.query({
      query: () => buildRequest('/list')
    })
  })
})

export const { useGetAllCoinsQuery } = coinDataApi

// In component
const { data, isLoading } = useGetAllCoinsQuery()
console.log(data)

Am I missing something obvious? Thanks for any help!

2

hey mate, had similar issues b4. check ur API key - sometimes they expire or have usage limits. also, make sure ur using the right endpoint. the ‘/list’ might not be correct for this API. try removing it and see what happens. good luck!

3

I’ve encountered similar issues with Rapid API before. From your code snippet, I noticed a potential problem with how you’re setting up the headers. The ‘X-CoinAPI-Host’ and ‘X-CoinAPI-Key’ headers aren’t standard for Rapid API. Usually, you need to use ‘X-RapidAPI-Host’ and ‘X-RapidAPI-Key’ instead.

Try modifying your coinApiHeaders like this:

const coinApiHeaders = {
‘X-RapidAPI-Host’: ‘coindatabase.p.rapidapi.com’,
‘X-RapidAPI-Key’: ‘your-api-key-here’
}

Also, double-check that you’re using the correct API key from your Rapid API dashboard. Sometimes, the key shown in the code snippets on their website isn’t your actual key.

If you’re still getting a 401 error after these changes, it might be worth verifying your subscription status for this specific API on the Rapid API website. Sometimes, there are usage limits or subscription issues that can cause authentication problems.

Hope this helps you resolve the issue!

4

I’ve dealt with similar Rapid API issues before. One thing to check is the baseUrl in your fetchBaseQuery. Make sure it’s the correct base URL for the Rapid API endpoint you’re trying to access. Sometimes, the API documentation provides a slightly different URL structure than what’s actually needed.

Also, have you tried using the RapidAPI client library? It can simplify the process of making requests and handling authentication. You might want to consider integrating it into your Redux setup.

Lastly, if you’re still getting 401 errors, it could be a rate limiting issue. Some APIs have strict limits on free tiers. Check your usage stats in the RapidAPI dashboard to ensure you haven’t exceeded any quotas. If all else fails, reaching out to RapidAPI support can often uncover account-specific issues that aren’t immediately apparent.