Reat Native & RTK 查询 - 请求成功时调用其他端点

Dev*_*o__ 3 javascript react-native redux rtk-query

我是 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: () => ({}),
})
Run Code Online (Sandbox Code Playgroud)

我为每种资源都有一个模块,例如:

// /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}` })
  })
}
Run Code Online (Sandbox Code Playgroud)

因此,在我的组件中,我用以下方式调用它:

const { data: matches, error, isLoading } = useFetchMatchesQuery('explorer')
Run Code Online (Sandbox Code Playgroud)

useFetchMatchesQuery现在,成功时我需要做的是:

  1. useFetchMatchesQuery使用响应数据中的所有匹配 ID 创建一个数组
  2. 调用其他查询来获取matchsIds参数中的其他数据
  3. 在渲染数据的同一组件中使用响应matches

mar*_*son 5

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

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