I am new in Redux & RTK Query and I do not understand how I can fetch data from another endpoint when response of another endpoint is succeed.
I created an API like that:
import { Config } from '@/Config'
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
const baseQuery = fetchBaseQuery({ baseUrl: Config.API_URL })
const baseQueryWithInterceptor = async (args, api, extraOptions) => {
let result = await baseQuery(args, api, extraOptions)
if (result.error && result.error.status === 401) {
// Deal with unauthorised
}
return result
}
export const api = createApi({
baseQuery: baseQueryWithInterceptor,
endpoints: () => ({}),
})
I have a modules for each resource, example:
// /modules/matches
import { api } from '../../api'
import { fetchMatches } from '@/Services/modules/matches/fetchMatches'
export const matchApi = api.injectEndpoints({
endpoints: build => ({
fetchMatches: fetchMatches(build),
}),
overrideExisting: false,
})
export const { useFetchMatchesQuery } = matchApi
// /modules/matches/fetchMatches
export const fetchMatches = build => {
return build.query({
query: type => ({ url: `matches/${type}` })
})
}
So, in my component I am calling it with:
const { data: matches, error, isLoading } = useFetchMatchesQuery('explorer')
Now, what i need to do when useFetchMatchesQuery
is succeed is:
useFetchMatchesQuery
response datamatchsIds
in paramsmatches
data.The main option here is to have a second useSomeOtherQuery()
hook in the same component, but "skip" that query until the first query is complete. This can be done be either passing {skip: false}
as an option, or the skipToken
variable as the query argument:
https://redux-toolkit.js.org/rtk-query/usage/conditional-fetching