Question

0

265

Vistas

Reat Native & RTK Query - Call an other endpoint when request is success

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.

about 4 years ago · Santiago Gelvez

2 Respuestas

Responde la pregunta

0

Here is the solution i used:

// /Containers/MyContainer

const [matchesIds, setMatchesIds] = useState([])

const {
    data: matches,
    error: matchesError,
    isLoading: matchesIsLoading,
  } = useFetchMatchesQuery('explorer')

  const {
    data: winnerMarkets,
    error: winnerMarketsError,
    isLoading: winnerMarketsIsLoading,
  } = useFetchWinnerMarketsQuery(matchesIds, { skip: matchesIds.length === 0 })

  useEffect(() => {
    if (matches) {
      const mIds = []
      matches.map(match => {
         mIds.push(match.id)
      })
      setMatchesIds(mIds)
    }
  }, [matches])

about 4 years ago · Santiago Gelvez Denunciar

Responde la pregunta

Encuentra empleos remotos

Accepted Answer · 2022-07-08T16:57:31.250Z

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

0

265

Reat Native & RTK Query - Call an other endpoint when request is success

2 Respuestas

0

0

Encuentra empleos remotos

Andres GPT