DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Multiple Parameters In Redux-Toolkit Query (RTK Query)
Kunal Ukey
Kunal Ukey

Posted on

Multiple Parameters In Redux-Toolkit Query (RTK Query)

RTK Query is a powerful data fetching and caching tool. It is designed to simplify common cases for loading data in a web application, eliminating the need to hand-write data fetching & caching logic yourself.

Problem: Redux-Toolkit Query accepts only one argument to pass, but there are some cases where you want to give multiple arguments. Currently, there has yet to be an official guide on this topic. So, how to pass multiple arguments?

Solution: Pass arguments as object.

Requirements:

  • Basic React Knowledge
  • Basic Redux-Toolkit Knowledge

Project Setup

We'll start by installing redux-toolkit & react-redux library, so open a terminal and run the command below.

npm install @reduxjs/toolkit react-redux 
Enter fullscreen mode Exit fullscreen mode

Now, Create a folder named redux inside the src folder.
Inside this redux folder, We'll create our api.js & store.js files.

api.js

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";

// Generates react hooks for endpoints
export const api = createApi({
    reducerPath: "api",
    baseQuery: fetchBaseQuery({baseUrl: "https://jsonplaceholder.typicode.com/"}),
    endpoints: (builder) => ({
        getUsers: builder.query({
            // Accepts only single argument
            query: (user) => `users/${user}`
        }),
    })
});

// Export endpoints as hooks
export const { useGetUsersQuery } = api;
Enter fullscreen mode Exit fullscreen mode

store.js

import { configureStore } from "@reduxjs/toolkit";
import { api } from "./api";

// Combines multiple states as root state
export const store = configureStore({
    reducer: {
        [api.reducerPath]: api.reducer,
    },
    // getDefaultMiddleware enables important feature like caching.
    middleware: (getDefaultMiddleware) => {
        return getDefaultMiddleware().concat(api.middleware)
    }
});
Enter fullscreen mode Exit fullscreen mode

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import { Provider } from "react-redux";
import { store } from "./redux/store";

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    // Wrap root component with Provider
    // Provider accepts store (root state) as prop
    <Provider store={store}> 
      <App />
    </Provider>
  </React.StrictMode>
);
Enter fullscreen mode Exit fullscreen mode

In General, Query using single parameter.

App.js

import { useEffect, useState } from "react";
import { useGetUsersQuery } from "./redux/api";

function App() {
  const [userData, setUserData] = useState();
  // You can only pass one argument πŸ€”
  const { data } = useGetUsersQuery(1);

  useEffect(() => {
    if(data) {
      setUserData([data]);
    }
    console.log(data)
  },[data])

  return (
    <div className="App"> 
      {userData && userData.map(item => (
        <div key={item.id}> 
          <p>{item.name}</p> 
          <p>{item.email}</p> 
        </div> 
      ))} 
    </div> 
  );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

Solution: Pass argument as object.

Previously, we passed the single argument, which is the user number. Now, instead of hardcoding the "users" keyword in the api endpoints, We will use it as an argument along with the user number.
We have to make a slight change inside our api.js file to pass the argument as an object and return an object with a URL property.

api.js

import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";

// Generates react hooks for endpoints
export const api = createApi({
    reducerPath: "api",
    baseQuery: fetchBaseQuery({baseUrl: "https://jsonplaceholder.typicode.com/"}),
    endpoints: (builder) => ({
        getUsers: builder.query({
            query: (args) => {
                // Destructuring Object
                const { type, userNumber } = args;
                return {
                    // Returns url with multiple args
                    url: `${type}/${userNumber}`
                }
            }
        }),
    })
});

// Export endpoints as hooks
export const { useGetUsersQuery } = api;
Enter fullscreen mode Exit fullscreen mode

Now we can use multiple arguments in our hook πŸ˜€. We have to pass it as an object. Let us see an example.

App.js

import { useEffect, useState } from "react";
import { useGetUsersQuery } from "./redux/api";

function App() {
  const [userData, setUserData] = useState();
  // Passing multiple arguments as an object πŸ˜€
  const { data } = useGetUsersQuery({type: "users", userNumber: 1});

  useEffect(() => {
    if(data) {
      setUserData([data]);
    }
    console.log(data)
  },[data])

  return (
    <div className="App"> 
      {userData && userData.map(item => (
        <div key={item.id}> 
          <p>{item.name}</p> 
          <p>{item.email}</p> 
        </div> 
      ))} 
    </div> 
  );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

We did it! πŸ˜„

Video Tutorial:

Thanks for reading! β™₯

Top comments (0)

Build Anything...


Use any Linode offering to create something for the DEV x Linode Hackathon 2022. A variety of prizes are up for grabs, inculding $1,000 USD. πŸ‘€

β†’ Join the Hackathon <-