标签: rtk-query

我已经使用 Axios 成功编写了我的应用程序来获取内容。截至目前，它已设置为在发生某些事件时获取内容（例如单击提交按钮）。但是，我正在尝试Redux 的 RTK 查询解决方案。该包生成挂钩，并在其示例中提供了在挂载时调用挂钩的简单组件级示例。

我如何利用这些 rtk-hook（以及一般的钩子），以便将它们与 、 和条件事件等行为联系onClick起来onSubmit？我知道这与hooks 规则准则相冲突，但我无法想象 RTK-Query 会受到如此限制，只允许组件级 onMount API 调用。

当我试图解决这个问题/等待一个有用的例子时，我正在阅读一些相关文章：

• https://blog.logrocket.com/react-hooks-frustrations/
• https://redux-toolkit.js.org/rtk-query/usage/usage-without-react-hooks

第二篇文章似乎有些相关，但我觉得它偏离了道路太远，并且正在质疑它是否值得rtk-query安装。我不妨只使用它axios，因为它可以在我的组件和逻辑中的任何地方使用。有人可以教育我如何解决这个问题吗？我是 rtk-query 的新手，它看起来真的很酷，但它的实现方法似乎也确实受到限制。

这是我的切片的示例api.ts：

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

const apiEndpoint = 'http://localhost:5000';

export const myApi = createApi({
  reducerPath: 'myApi',
  baseQuery: fetchBaseQuery({ baseUrl: apiEndpoint }),
  endpoints: builder => ({
    getFileById: builder.query<any, { id: string; fileId: string }>({
      query: arg => { …

项目使用redux工具包和rtk查询。数据是从一个 api 获取的，但代码被分成更小的块以反映逻辑部分，例如

• /汽车
• /用户
• /设置

...ETC

注销后，rtk 查询会保留其状态，因此下次登录时数据是旧的。它们甚至可能不反映当前用户。如何使所有缓存失效？

以下代码使用 RTK 查询创建 Redux Hook：

export const specialtiesApi = createApi({
    reducerPath: 'specialtiesApi',
    baseQuery: fetchBaseQuery({ baseUrl: 'https://someplace.com/' }),
    endpoints: (builder) => ({
        getSpecialties: builder.query({
            query: (name) => `specialties`,
        }),
    }),
});

export const { useGetSpecialtiesQuery } = specialtiesApi;

最后一行代码抛出 Typescript 编译时错误：

Property 'useGetSpecialtiesQuery' does not exist on type 'Api<BaseQueryFn<string | FetchArgs, unknown, FetchBaseQueryError, {}, FetchBaseQueryMeta>, { getSpecialties: QueryDefinition<...>; }, "specialtiesApi", never, unique symbol>'

我的代码改编自https://redux-toolkit.js.org/rtk-query/usage-with-typescript使用 Typescript 4.3.5。

我看不出有什么问题。有任何想法吗？

我昨天刚开始使用 redux，在阅读了不同的库后，我决定使用 RTK 的切片路线。

对于我的异步，我决定使用 RTK 查询，而不是使用 createAsyncThunk，并且我有一个关于从另一个切片访问状态的正确方法的问题。

slice1 包含一些用户数据，例如：

export const initialState: IUserState = {
   name: 'example',
   id: null,
};

在我的 slice2 中，我有一个函数想要执行getSomethingByUserId(id)和我当前的实现之类的操作：

interface IApiResponse {
  success: true;
  result: IGotSomethingData[];
}

const getsomethingSlice: any = createApi({
  reducerPath: 'api',
  baseQuery: fetchBaseQuery({
    baseUrl: 'https://someapibase',
  }),
  endpoints(builder) {
    return {
      fetchAccountAssetsById: builder.query<IApiResponse, null>({
        query() {
          console.log('store can be called here', store.getState().user.id);
          return `/apipath?id=${store.getState().user.id}`;
        },
      }),
    };
  },
});

export default getsomethingSlice;
export const { useFetchAccountAssetsByIdQuery } = getsomethingSlice;

正如我在某处读到的，markikson 提到导入 …

我正在尝试在我们当前的应用程序中实现无限滚动功能；

我们首先获取页面的前 5 个“帖子”。滚动到页面底部后，我们会获取接下来的 5 篇帖子。

这很好用，但是使用相同的查询意味着现有数据（前 5 个帖子）已被新数据替换。

是否可以将现有数据与新数据合并？

我可以将它们合并到位，例如使用类似的内容；const posts = [newPosts, oldPosts]但如果现有数据被修改，我们就会失去 RTK 查询提供的数据失效。

对于这种情况，推荐的方法是什么？

这是根据页面返回数据的钩子

    const {
        data,
        isFetching,
        isLoading,
        isError,
    } = useGetResourceQuery(page, perPage );

这是 API

    export const api = createApi({
        baseQuery: fetchBaseQuery({
            baseUrl: "http://localhost:3001",
        
        }),
        tagTypes: ["resource"],
        endpoints: (build) => ({
            getResource: build.query({
            query: (page = 1, perPage = 20) =>
                `resource?spage=${page}&limit=${perPage}`,
            }),
        }),
    });
    export const {useGetResourceQuery} = api

有什么方法可以提取所有查询的状态吗？我想实现基于滚动的分页（无限滚动）需要更新中间件吗？或者有什么方法可以访问状态并将其公开为上面的函数，我浏览了文档但找不到解决方案

我可以使用本地状态并将它们连接起来，但想知道是否可以使用 RTK

谢谢

我正在使用带有 RTK 突变的 Typescript，一切正常，但如果我以特定 JSON 格式从后端发送任何错误，例如：

{ 
   status: "Error",
   message "Something went wrong"
}

当我检查浏览器网络选项卡时，它会向我显示正确的错误响应，例如：

{
   data: { 
      status: "Error",
      message "Something went wrong"
    }
}

我在突变挂钩中遇到错误：

const [createCategory, {isLoading, error }] = useCreateCategoryMutation();

但我无法error.data.message在我的反应中访问它给我的类型错误，例如：

类型“FetchBaseQueryError | ”上不存在属性“数据” 序列化错误'。

我正在尝试使用 RTK 查询为我的项目设置缓存失效，但在遵循官方文档时出现类型错误。目标是使获取的资源列表中的单个项目无效，但我在尝试提供一个通用标签时陷入困境：

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

export const remoteScriptsApi = createApi({
    baseQuery: fetchBaseQuery({
        baseUrl: '/api', prepareHeaders: (headers) => {
            headers.set('Accept', 'plain/text, application/json');
            return headers;
        }
    }),
    endpoints: (builder) => ({
        getScenes: builder.query<number[], void>({
            query: () => ({ url: '/scenes' }),
            providesTags: ['Scenes']
        }),
    })
})

['Scenes'] 带有下划线，显示以下错误消息：

Type 'string' is not assignable to type 'FullTagDescription<never>'.ts(2322)

我对 TypeScript 还很陌生，但我仍然尝试深入研究 RTK 查询的类型文件，以找出预期“从不”的位置和原因。但运气不好。

如果我的项目和/或代码需要更多背景信息，请告诉我！谢谢！

我已在文档中阅读过此内容，但我不确定BrowserRouter和之间有什么区别createBrowserRouter。

这就是文档中所说的：

创建浏览器路由器：

这是所有 React Router Web 项目的推荐路由器。它使用 DOM History API 来更新 URL 并管理历史堆栈。

它还支持 v6.4 数据 API，如加载器、操作、获取器等。

浏览器路由器：

A<BrowserRouter>使用干净的 URL 将当前位置存储在浏览器的地址栏中，并使用浏览器的内置历史记录堆栈进行导航。

我的第二个问题是：

我可以createBrowserRouter在不添加数据 API（如加载器、操作等）的情况下使用吗？原因是我不确定如何将数据 API 与 Redux Toolkit Query 一起使用，而且我发现来源有限。我也许可以稍后添加加载器。

如果第二个查询需要第一个查询返回的参数，那么链接查询的正确方法是什么？

const { data: user } = useGetUserQuery();

用户对象包含一个用于运行的ID

const { data: userBio} = useGetUserBioQuery(user.id);

如何确保第二个仅在第一个完成后运行？