Redux Toolkit Query React，不要立即带参数调用queryhook答案

【问题标题】：Redux Toolkit Query React, dont immediately call queryhook with parametersRedux Toolkit Query React，不要立即带参数调用queryhook
【发布时间】：2022-12-24 11:42:01
【问题描述】：

我已经使用 Redux 工具包一段时间了，但我只是 RTK 查询的新手。真的很享受。但是当我想使用查询钩子时，有时我不想立即调用带参数的钩子，而是想等到用户输入参数后调用钩子（在下面的例子中变量'bulbasaur'不是却为我所熟知。

如何使用 RTK 查询来执行此操作？
在 Internet 上的示例和他们自己的示例中 website 我找不到示例？所以，我不想立即用变量'bulbasaur' 调用useGetPokemonByNameQuery。但我希望用户首先输入一个名称，然后使用该变量调用useGetPokemonByNameQuery。

这似乎是一个简单的问题......但我不知道该怎么做。

下面的代码是来自他们的website 的示例。

Import * as React from 'react'
import { useGetPokemonByNameQuery } from './services/pokemon'

export default function App() {
  // Using a query hook automatically fetches data and returns query values

  // SO: I dont want to call the useGetPokemonByNameQuery immediately with the variable 'bulbasaur', but after the user enters a name.
  const { data, error, isLoading } = useGetPokemonByNameQuery('bulbasaur')
  // Individual hooks are also accessible under the generated endpoints:
  // const { data, error, isLoading } = pokemonApi.endpoints.getPokemonByName.useQuery('bulbasaur')

  return (
    <div className="App">
      {error ? (
        <>Oh no, there was an error</>
      ) : isLoading ? (
        <>Loading...</>
      ) : data ? (
        <>
          <h3>{data.species.name}</h3>
          <img src={data.sprites.front_shiny} alt={data.species.name} />
        </>
      ) : null}
    </div>
  )
}

【问题讨论】：

您可以使用 useGetPokemonByNameQuery('bulbasaur', { skip: true }) 来避免基于条件的提取。但是 IMO 你应该把输入分开并创建两个不同的组件

标签： reactjs redux-toolkit

【解决方案1】：

如果您错过 reducerPath 的 createApi 方法，则 Redux Toolkit Query 生成的请求无法正常工作

export const brandApi = createApi({
  reducerPath: 'brandApi',
  baseQuery: fetchBaseQuery({ baseUrl: `${BASE_URL}/user/brand` }),
  endpoints: builder => ({
    getBrand: builder.query<any, void>({
      query: () => ({
        url: '',
        method: 'GET',
      }),
    }),
  }),
});

【讨论】：