Define an RTK Query API with createApi
In order to benefit from RTK Query you need to centrally define an "API slice", where you declare all of the API endpoints your application will need to use. Your redux store also has to be told about this API slice, luckily it's all only a few lines of code.
export const api = createApi({
baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
endpoints: (builder) => ({})
})
And then later in your store file:
export const store = configureStore({
reducer: {
[api.reducerPath]: api.reducer,
},
middleware: (getDefaultMiddleware) =>
getDefaultMiddleware().concat(api.middleware),
});
One of the concepts we mention only briefly in the lesson is the base query. There are several options for base queries including some examples for axios and graphQL base queries you can look into. They are extremely customizable, but I've found using the simple fetchBaseQuery is usually enough to get started.
https://redux-toolkit.js.org/rtk-query/usage/customizing-queries
Jamund Ferguson: [0:00] Inside your store folder and src, create a new file called apiSlice.js. In here, you're going to want to import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react". Then type export const api = createApi. First, you'll pass in a key called baseQuery to have a value of fetchBaseQuery and then you pass in an options object with the baseUrl of "/api".
[0:29] What do we have here so far exactly? baseQuery here in RTK Query terms is a built-in helper function that allows you to make your fetch calls.
[0:39] The built-in fetchBaseQuery is a baseQuery built around fetch, but there's also an axios baseQuery, a GraphQL baseQuery. There's all sorts of different baseQueries that are basically just utilities to make it easier to fetch your data.
[0:54] The next thing we need to add is our endpoints. I'm not going to add any right now, but we are going to set up the structure for it. Endpoints takes a function that has this builder property and we'll be using that to create our various endpoints. For now, we'll just have it return an empty object.
[1:11] With that set up, let's also open up store/index.js. In here, we're going to import { api } from "./apiSlice". We're going to add a new key in our reducer object. This one will have [api.reducerPath]: api.reducer.
[1:30] Now, we need to add new middleware to support RTK Query. Type middleware: we're going to pass in a function. This first argument is called getDefaultMiddleware. It's just a function that will return the default middleware that Redux toolkit uses. Type that and then we're going to concat it with the middleware from our API.
[1:49] We've added our api.reducer and we've added new middleware to represent our api.middleware. This is all the boilerplate we really need. If we go back to our browser, I'm going to open up our inspector window and I just want to confirm as I click through, there's no serious errors. Everything seems to continue working as expected.
[2:08] With that, we've got everything we need to start fetching data using RTK Query.