/moon-tech-rtk-query-practice

Moon Tech RTK Query Practice

Primary LanguageJavaScript

Moon Tech RTK Query Practice

Structure :

  • src > features > api > apiSlice.js

createApi initial set up : details

  • import { createApi } from "@reduxjs/toolkit/query/react"
  • export const productApi = createApi({})
    • reducerPath
    • baseQuery
    • tagTypes
    • endpoints

baseQuery

endpoints

  • (builder) => ({}),
    • getProducts: builder.query({
      • query: () => ({}),
        • url: "/product",

store.js set up : details

  • configureStore({})
    • reducer: { [productApi.reducerPath]: productApi.reducer, }
    • middleware: (getDefaultMiddleware) => getDefaultMiddleware().concat(productApi.middleware),

refetchOnMountOrArgChange

  • fetch data each time when the page render

Automated Re-fetching

  • tagTypes details
    • cache the tags
  • providesTags details
    • add tags in cache
    • re-fetch this query if those tags invalidated
  • invalidatesTags details
    • invalidates tags so that data can re-fetch.