React Native & RTK Query - 请求成功时调用另一个端点

Question

我是 Redux 和 RTK 查询的新手，我不明白如何在另一个端点的响应成功时从另一个端点获取数据。

我创建了一个 API 这样的：

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: () => ({}),
})

每个资源我都有一个模块，例如：

// /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}` })
  })
}

所以，在我的组件中，我用以下方式调用它：

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

现在，当useFetchMatchesQuery成功时我需要做的是：

使用 useFetchMatchesQuery 响应数据
在参数

matchsIds

在呈现 matches 数据的同一组件中使用响应。

Answer 1

此处的主要选项是在同一组件中有第二个 useSomeOtherQuery() 挂钩，但“跳过”该查询，直到第一个查询完成。这可以通过将 {skip: false} 作为选项传递或将 skipToken 变量作为查询参数来完成：

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

Answer 2

这是我使用的解决方案：

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

React Native & RTK Query - 请求成功时调用另一个端点

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

javascript

react-native

redux

rtk-query