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:
- Create an array with all match's id from
useFetchMatchesQuery
response data - Call an other query to fetch an other data with
matchsIds
in params - Use response in the same component who render
matches
data.
Thanks for your help