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

admin管理员组

文章数量:1405516

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 ponent I am calling it with:

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

Now, what i need to do when useFetchMatchesQuery is succeed is:

1. Create an array with all match's id from useFetchMatchesQuery response data
2. Call an other query to fetch an other data with matchsIds in params
3. Use response in the same ponent who render matches data.

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 ponent I am calling it with:

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

Now, what i need to do when useFetchMatchesQuery is succeed is:

1. Create an array with all match's id from useFetchMatchesQuery response data
2. Call an other query to fetch an other data with matchsIds in params
3. Use response in the same ponent who render matches data.

• javascript
• react-native
• redux
• rtk-query

Share Follow edited May 1, 2022 at 19:52 Sunderam Dubey 8,8371212 gold badges2424 silver badges4242 bronze badges asked Dec 11, 2021 at 15:44 Devio__Devio__ 9922 silver badges99 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

The main option here is to have a second useSomeOtherQuery() hook in the same ponent, but "skip" that query until the first query is plete. This can be done be either passing {skip: false} as an option, or the skipToken variable as the query argument:

https://redux-toolkit.js/rtk-query/usage/conditional-fetching

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])

本文标签： javascriptReat Native amp RTK QueryCall an other endpoint when request is successStack Overflow