CODEWITHSUNDEEP
reactjsreduxreact-hooksredux-toolkitrtk-query
kevin
kevin

Reputation: 3508

Approaches for using RTK-Query hooks inside functions?

I've successfully written my application using Axios to fetch content. As of now, it's set up to fetch content when certain events happen (like the submit button has been clicked.) However, I'm experimenting with Redux's RTK-Query solution. This package generates hooks and in their examples, they provide simple component-level examples that call the hooks on mount.

How can I leverage these rtk-hooks (and hooks in general) so I can tie them to behaviors like onClick, onSubmit, and conditional events? I'm aware this conflicts with the rules-of-hooks guidelines, but I can't imagine RTK-Query would be so limited as to only allow component-level onMount API calls.

some related articles I'm reading while I try to figure this out / wait for a helpful example:

The second article seems somewhat relevant but I feel like its beating too far off the path and is making question if it's even worth having rtk-query installed. I might as well just use axios since it can be used anywhere in my components and logic. Can someone educate me on how to approach this problem? I'm new to rtk-query, it seems really cool but it also seems really restrictive in its implementation approaches.

Here is an example of my api.ts slice:

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

const apiEndpoint = 'http://localhost:5000';

export const myApi = createApi({
  reducerPath: 'myApi',
  baseQuery: fetchBaseQuery({ baseUrl: apiEndpoint }),
  endpoints: builder => ({
    getFileById: builder.query<any, { id: string; fileId: string }>({
      query: arg => {
        const { id, fileId } = arg;
        return `/service/${id}/files/${fileId}`;
      },
    }),
  }),
});

// RTK Query will automatically generate hooks for each endpoint query
export const { useGetFileByIdQuery } = myApi;

generic example using axios:

const handleSubmit = async (): Promise<void> => {
    try {
      const getResponse = await axios.get('my-endpoint/abc/123');
    }
    catch (e) {
     ...
    }
}

Upvotes: 27

Views: 37694

Answers (2)

phry
phry

Reputation: 44186

If you use a query, you would use local component state to set the query parameter

import { skipToken } from "@reduxjs/toolkit/query";
const [myState, setState] = useState(skipToken) // initialize with skipToken to skip at first
const result = useMyQuery(myState)

and in your click handler you then set the state

const changePage = () => {
  setState(5)
}

In your case though, you have a form submit and that sounds you want to use a "mutation", not a query. The point of mutations is that you are not really interested in the result long-term, but rather want to trigger a change on the server by sending data.

const [trigger, result] = useMyMutation()

that would be called like

const handleSubmit = () => {
  trigger(someValue)
}

Upvotes: 49

Israel
Israel

Reputation: 495

There is another option to pass boolean as the second argument of the query.

For example:

I use this for login:

const [email, setEmail] = useState<string>('')
const [password, setPassword] = useState<string>('')
const [loginCredentials, setLoginCredentials] = useState<ILoginRequest>({ email: '', password: '' })

const { data, error, isError, isSuccess, isLoading } = useLoginQuery(loginCredentials, {
    skip: loginCredentials.email === '' && loginCredentials.password === '',
})

Note: the skip parameter is false when the component load. When user fills email and password I'm setting the email and password state. And when press the login button I set the loginCredentials state and the RTK query is triggered.

Upvotes: 15

Related Questions