{"id":57964,"date":"2023-08-17T17:33:12","date_gmt":"2023-08-17T12:03:12","guid":{"rendered":"https:\/\/www.tothenew.com\/blog\/?p=57964"},"modified":"2023-08-30T17:49:45","modified_gmt":"2023-08-30T12:19:45","slug":"a-beginners-guide-to-redux-toolkit-query-rtk-query","status":"publish","type":"post","link":"https:\/\/www.tothenew.com\/blog\/a-beginners-guide-to-redux-toolkit-query-rtk-query\/","title":{"rendered":"A Beginner\u2019s Guide to Redux Toolkit Query\/RTK Query"},"content":{"rendered":"

\"\"<\/span><\/p>\n

RTK Query is a set of utilities, a powerful data fetching and caching tool. It is an additional package provided by Redux Toolkit that enhances Redux by adding data fetching and caching capabilities.\u00a0 Data fetching and state management are simple to incorporate in the Redux application by the smooth integration with Redux Toolkit.<\/span><\/p>\n

Key Aspects of RTK Query –<\/b>\u00a0<\/span><\/h3>\n
    \n
  • Fetch loading<\/span><\/li>\n
  • Error handling<\/span><\/li>\n
  • Automatic Caching<\/span><\/li>\n<\/ul>\n

    RTK Query primarily consists of two API\u2019s –\u00a0<\/b><\/h3>\n
      \n
    • createApi()<\/span><\/li>\n
    • fetchBaseQuery()<\/span><\/li>\n<\/ul>\n

      createApi()<\/b><\/em> – To use RTK Query we must construct an \u2018API Slice\u2019<\/em> <\/strong>centrally, in which all the API endpoints that our application requires are listed. This \u2018API Slice\u2019 structure consists of all the Redux logic that enables us to fetch and cache data easily, <\/span>createApi() takes an object parameter with {baseQuery, tagTypes, reducerPath, endpoints}<\/em><\/strong> as the configuration options. <\/span>
      \n<\/span>
      \n<\/span>fetchBaseQuery()<\/b><\/em> – It is a compact fetch wrapper designed to streamline API requests & responses in Redux Toolkit and is passed to the <\/span>baseQuery <\/i><\/strong>field in the createApi().<\/span><\/p>\n

      Query and Mutation Endpoints\u00a0 –\u00a0<\/b><\/h3>\n

      In RTK Query, The API endpoints are defined by returning the object inside the endpoints section of the createApi().All the endpoints are defined ahead of time and are created against the same baseUrl specified inside the baseUrl<\/strong><\/em> field of the fetchBaseQuery().<\/em><\/strong><\/span><\/p>\n

      There are two types of endpoints –\u00a0 <\/span>Query and Mutation<\/b><\/em>.<\/em> Query Endpoint is used while fetching or caching data from the server and Mutation is used while sending an update to the server. All the fields of the endpoints are defined using the <\/span>builder.query() or builder.mutation()<\/b><\/em> method.<\/span><\/p>\n

      Redux Toolkit Hooks –\u00a0<\/b><\/h3>\n

      RTK Query automatically generates hooks for every endpoint defined, based on the name of the endpoint in the service definition. These auto-generated hooks can be directly imported inside the UI component for data-fetching.\u00a0<\/span><\/p>\n

      Caching Data using RTK Query –\u00a0<\/b><\/h3>\n

      In order to prevent re-fetching the same data repeatedly, caching is used. Thus, the caching functionality allows to reuse the already fetched data or cached data until the database is not changed.\u00a0<\/span><\/p>\n

      But we may need not to use the cached data or fetch fresh data according to the use case. So, we use <\/span>Cache Invalidation<\/b><\/em> to re-fetch the data.\u00a0<\/span><\/p>\n

      Cache Invalidation is achieved using the\u00a0 –\u00a0<\/span><\/p>\n

        \n
      • tagTypes<\/b><\/em> – a tag or name is given to an apiSlice to manage the caching and invalidation behavior.<\/span><\/li>\n
      • provideTags<\/em> <\/b>– a query consists of a provide tag that determines which tag is attached to the cached data returned by the query<\/span><\/li>\n
      • invalidateTags<\/b><\/em> – a mutation consists of an invalidate tag that determines which cached data is to be invalidated or re-fetched.<\/span><\/li>\n<\/ul>\n

        \"\"<\/p><\/blockquote>\n

        CRUD Operations using RTK Query –<\/b><\/h3>\n

        Step 1. Create a React Project\u00a0<\/i><\/b><\/p>\n

        npx create-react-app demo-app<\/span><\/p><\/blockquote>\n

        Step 2. Install required libraries\u00a0<\/i><\/b><\/p>\n

        npm install react-redux @reduxjs\/toolkit bootstrap<\/span><\/p><\/blockquote>\n

        Step 3. Create a mock JSON Server.\u00a0<\/i><\/b><\/p>\n

          \n
        • Create a json file -> \u2018db.json\u2019 in the application<\/span><\/li>\n
        • Install json server using\u00a0 -> npm install -g json-server<\/span><\/li>\n
        • Start the json server using -> json-server -\u2013watch db.json -\u2013port PORT_NUMBER<\/span><\/li>\n<\/ul>\n

          S<\/b>tep 4. Create an API Slice<\/i><\/b><\/p>\n

          \"\"<\/p><\/blockquote>\n

          Step 5. Connect API Slice to Redux Store<\/i><\/b><\/p>\n

          \"\"<\/p><\/blockquote>\n

          Step 6. Retrieve data using Query Endpoint<\/i><\/b><\/p>\n

          This Query Endpoint is used to fetch all the data from the database i.e db.json file and display a list of all the list items. <\/span>Here, <\/span>useGetProductsQuery<\/span> is an auto-generated query hook that provides data, isLoading, isSuccess, isError, error properties. Data property of the hook can be used to fetch & display the data inside the UI component.<\/span><\/p>\n

          \"\"<\/p><\/blockquote>\n

          Step 7. Update Operation using Mutation Endpoint<\/i><\/b><\/p>\n

          Mutation endpoint is used to add a new item in the list and delete an item. <\/span>useAddProductMutation<\/span> and <\/span>useDeleteProductMuatation<\/span> are the mutation hooks.<\/span><\/p>\n

          \"\"<\/p><\/blockquote>\n

          Step 8. Use RTK hooks inside Components<\/i><\/b><\/p>\n

          The RTK Query and Mutation hooks are imported inside the required UI React Components for fetching and updating the data.<\/span><\/p>\n

          \"\"<\/p>\n

          \"\"<\/p><\/blockquote>\n

          With the above RTK Query implementation the following Redux implementation steps have been eliminated –\u00a0<\/b><\/h4>\n
            \n
          • No need to create multiple action creators for each fetch request, as there is a single API service for the entire baseUrl.<\/span><\/li>\n
          • Creating multiple reducers have been removed.\u00a0<\/span><\/li>\n
          • We can retrieve data directly without having to dispatch actions or use selectors inside the UI components.\n

            <\/span><\/li>\n<\/ul>\n

            <\/div>","protected":false},"excerpt":{"rendered":"

            RTK Query is a set of utilities, a powerful data fetching and caching tool. It is an additional package provided by Redux Toolkit that enhances Redux by adding data fetching and caching capabilities.\u00a0 Data fetching and state management are simple to incorporate in the Redux application by the smooth integration with Redux Toolkit. Key Aspects […]<\/p>\n","protected":false},"author":1619,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":249},"categories":[3429,3038],"tags":[4064,4390,5328],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/57964"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/1619"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=57964"}],"version-history":[{"count":3,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/57964\/revisions"}],"predecessor-version":[{"id":58208,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/57964\/revisions\/58208"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=57964"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=57964"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=57964"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}