Please adjust your tutorial to remove createRequest

[phryneas]

Hi,
I'm the author of RTK Query.

Please do not use that kind of createRequest helper function as you are showing here:

crypto-news-site/src/services/cryptoNewsApi.js

Line 10 in 1e99a60

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

That is taken from a tutorial that grossly misunderstands what baseQuery is made for (and spreading to other tutorials now).

Essentially, baseQuery is already a createRequest function like this - the return value of an endpoint's query function will be passed as first argument into baseQuery, which will in the case of fetchBaseQuery then call fetch.

So please use fetchBaseQuery correctly instead here:

export const api = createApi({
    baseQuery: fetchBaseQuery({ 
      baseUrl,
//    either you can just set `headers` here:
//    headers: { "Accept": "application/vnd.api+json" }

//    or you use `prepareHeaders` where you can do some calulations and have access to stuff like `getState` or the endpoint name
      prepareHeaders: (headers, { getState, endpoint, type, forced }) => {
         headers.set("Accept", "application/vnd.api+json")
         return headers
      }
     }),
    endpoints: (builder) => ({
        getSomeStuff: builder.query({
          query: () => { url: `/someStuff` }
// or the short notation: if you only have an `url` just pass a string
//        query: () => `/someStuff`
        }),
    })
});

I would greatly appreciate it if you could change that up in this tutorial as this is essentially a bad practice and we do not want it to spread.

[am-miracle]

Hi,
Thanks for letting me know. I have adjusted it.

[phryneas]

It is still mentioned on the article at https://blog.openreplay.com/leverage-rapidapi-data-with-redux-toolkit/ - could you please change it there, too?

Also, my suggestion would be more along the lines of:

const cryptoNewsHeader =  {
  "Accept": "application/vnd.api+json",
  'X-BingApis-SDK': 'true',
  'X-RapidAPI-Key': '129b2fc319msh341b23a0412e0abp1dab02jsn64e71a25960c',
  'X-RapidAPI-Host': process.env.REACT_APP_RAPIDAPI_KE
}

export const cryptoNewsApi = createApi({
  reducerPath: 'cryptoNewsApi',
-  baseQuery: fetchBaseQuery({baseUrl: 'https://bing-news-search1.p.rapidapi.com/'}),
+  baseQuery: fetchBaseQuery({
+        baseUrl: 'https://bing-news-search1.p.rapidapi.com/',
+        headers: cryptoNewsHeader
+ }),
  endpoints: (builder) => ({
    getCryptosNews: builder.query({
      query: (newsCategory) => ({
        url: `/news/search?q=${newsCategory}`,
        method: 'GET',
-       headers: cryptoNewsHeader
      }),
    })
  })
});

[am-miracle]

Hi,

I will reach out to the editor to update the code

I did what you just corrected but I didn't get the data I was fetching until I did just this:

  endpoints: (builder) => ({
    getCryptosNews: builder.query({
      query: (newsCategory) => ({
        url: `/news/search?q=${newsCategory}`,
        method: 'GET',
         headers: cryptoNewsHeader
      }),
    })
  })

[phryneas]

Oh wow. That actually should work and is a bug that was never reported to us 🤦

Meanwhile, this should do it:

export const cryptoNewsApi = createApi({
  reducerPath: 'cryptoNewsApi',
  baseQuery: fetchBaseQuery({
    baseUrl: 'https://bing-news-search1.p.rapidapi.com/',
    prepareHeaders(headers) {
        headers.set("Accept", "application/vnd.api+json")
        headers.set("X-BingApis-SDK", "application/vnd.api+json")
        headers.set("X-RapidAPI-Key", process.env.REACT_APP_RAPIDAPI_KEY)
        headers.set("X-RapidAPI-Host", 'bing-news-search1.p.rapidapi.com')
        return headers
    }
  }),
  endpoints: (builder) => ({
    getCryptosNews: builder.query({
      query: (newsCategory) => ({
        url: `/news/search?q=${newsCategory}`,
        method: 'GET',
      }),
    })
  })
});

and I'll go and fix that on our side...

[am-miracle]

Ok, this one works. Thanks.