标签: rtk-query

有人可以帮助我使用 creatApi 和 redux 工具包中的查询实现来实现去抖功能。

提前致谢。

我正在尝试在货币转换器应用程序中使用 RTK 查询。这个应用程序是基于2个API。

首先，我正在获取一个带有货币的对象。然后，我获取一系列国家/地区并对其进行过滤，具体取决于该国家/地区是否拥有该种货币。

商店代码：

export const store = configureStore({
  reducer: {
    [currenciesAPI.reducerPath]: currenciesAPI.reducer,
    [countriesAPI.reducerPath]: countriesAPI.reducer,
  },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(currenciesAPI.middleware, countriesAPI.middleware)
})

API代码：

export const currenciesAPI = createApi({
  reducerPath: 'currenciesAPI',
  baseQuery: fetchBaseQuery({ baseUrl: 'https://api.frankfurter.app'}),
  endpoints: (build) => ({
    fetchAllCurrencies: build.query<Currencies, void>({  
      query: () => ({
        url: '/currencies'
      }),
    })
  })
})

export const countriesAPI = createApi({
  reducerPath: 'countriesAPI',
  //tagTypes: ['Country'],
  baseQuery: fetchBaseQuery({ baseUrl: 'https://restcountries.com/v3.1'}),
  endpoints: (build) => ({
    fetchAllCountries: build.query<TransformedCountries[], string>({  
      query: () => ({
        url: '/all'
      }),
      transformResponse: …

我正在实现 rtk-query，并且库的轮询功能遇到问题。

### service.js
export const api = createApi({
  ...,
  endpoints: (builder) => ({
    getBlockPurchase: builder.query({
      query: (id) => `block-purchases/${id}/`,
    }),
  }),
});

### component.js
function BlockPurchaseComponent({ blockPurchaseId }) {
  const { data, error } = useGetBlockPurchaseQuery(blockPurchaseId, {
    pollingInterval: 3000,
  });

  ...
}

查询一次可以正常工作，但后续的轮询请求不会发送。在文档中它看起来很简单，但看起来我错过了一些东西。请让我知道有助于找到解决方案的任何其他信息。

编辑：这是设置不正确的中间件：

const store = configureStore({
  reducer: persistedReducer,
  middleware: getDefaultMiddleware({
    serializableCheck: {
      ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
    },
    ...api.middleware,
  }),
});

我有一些可能返回 404 的请求。当它们这样做时，RTK 查询将发送重试，导致数百个失败的请求。为什么它会尝试在错误时重新获取？我该怎么办？

我正在使用 RTK 查询来处理我的请求。但我在取消请求时遇到问题。

场景是这样的，我有一个模式来显示一个表单来添加待办事项，但是，当用户想要关闭模式时，如果请求尚未挂起，则应该取消该请求。

const [addTodo, { isLoading }] = useAddTodoMutation();

const onSubmit = async (values: ToDo) => {
     try {
      await addTodo(values).unwrap();
      console.log('Successful')
    } catch (error) {
      console.log('failed')
    }
  };

我知道有一个abort取消突变addTodo(values).abort();，我们可以在useEffect清理中使用它useRef。

是否可以编写通用方法或自定义挂钩来包装所有突变并在卸载组件时处理取消请求？

我正在创建一个宠物项目，前端使用 React 和 Redux，后端使用 Express 的 Node.js。这是我第一次使用 Redux 和 RTK 查询，我对 cookie 未保存感到困惑。

我尝试了RTK Query的两种变体，但都不适合我。

const baseQuery = fetchBaseQuery({
  baseUrl,
  credentials: "include",
});

和

signIn: builder.mutation<User, SignInPayload>({
  query(body) {
    return {
      url: "/auth/jwt",
      method: "POST",
      body,
      credentials: "include",
    };
  },
}),

如果我使用axios和到达相同的端点{withCredentials: true}，则一切正常，并且 cookie 会保留。

我在下面附上我的请求/响应标头。

我真的很喜欢 graphql + rtk 查询，但我无法让 graphql 订阅工作。

我几乎直接从redux文档中复制了流式更新示例。但我得到了错误subscriptions are not supported over HTTP, use websockets instead。

我不知道如何解决这个问题，有帮助吗？几乎找不到任何有关 graphql 订阅 + rtk 查询的文档

userStatus: builder.query<
      UserStatusSubscriptionSubscription,
      {
        event_id: string;
        user_id: string;
      }
    >({
      query: ({ event_id, user_id }) => ({
        document: gql
          subscription UserStatusSubscription(
            $event_id: uuid!
            $user_id: String!
          ) {
            eetschema_event_by_pk(id: $event_id) {
              event_attendees(where: { user_id: { _eq: $user_id } }) {
                status
                event_id
                user_id
              }
            }
          }
        ,
        variables: { event_id, user_id },
      }),
      async onCacheEntryAdded(
        arg, …

我已经在我的一个项目中集成了 RTK 查询，并且我试图了解如何处理我的表的 UI。我已经阅读过其他 StackOverflow 问题（例如那个问题），但我无法找到我的用例的答案。

我的表格行对其有操作，因此用户可以直接从表格页面编辑或删除行项目。

我正在使用以下 RTK 查询挂钩：

// To fetch the data that populates the table. 
// 'isLoading' is used to show the spinner all over the table
const {data, isLoading} = useGetItemsQuery()

// To trigger the edit of the item.
const [triggerEditItem] = useEditItemMutation({fixedCacheKey: 'edit-item-' + data.id})

// To get when the editing is happening 
const [, {isLoading: isEditing}] = useEditItemMutation({fixedCacheKey: 'edit-item-' + data.id})

这是我的切片：

serviceApi.injectEndpoints({
  endpoints: (builder) => ({
    getItems: builder.query({
      providesTags: [TAGS.ITEMS], …

您好，我正在使用 RTK 查询进行 API 交互，但遇到一些错误，如果错误或成功，我会触发突变端点失效，始终会执行。

我正在寻找的是使突变成功的标签无效这是我的代码

获取端点

getPosts: builder.query({ query: () => /帖子, providesTags: ['Posts'], transformResponse: (response, meta, arg) => response.data, transformErrorResponse: (response, meta, arg) => response.data?.message ?? response , })

突变终点

mutatePost: builder.mutation({ query: (data,id) => ({ url: id?/posts/${id} : /posts`, 方法: id?'PATCH':'POST', 正文: 数据, }),

  transformResponse: (response, meta, arg) => response.data,
  transformErrorResponse: (response, meta, arg) => response.data?.message ?? response , 
  invalidatesTags: ['Posts'],

})`

我尝试了所有可用的结果，但不符合我的期望

我正在使用Redux Toolkit和RTK 查询构建一个项目，并尝试从 API 获取一些条目。我使用的是标准化数据方法，createEntityAdapter因为在某个组件中我需要将数据作为数组，所以我最终使用了选择器。现在我的问题是，由于我添加过滤器作为查询的参数，我的选择器停止工作。

我在这里研究了类似的问题，例如：如何使用带参数的 RTK 查询选择器？，但我太笨了，无法理解我应该修改什么。我试图理解RTK 查询文档，但我做不到。

从上面的问题中我得知我的选择器还需要具有参数才能准确地知道要选择什么，并且这不是推荐的模式，但我无法理解如何使其工作。

我的入口切片：

import { createSelector, createEntityAdapter } from '@reduxjs/toolkit'
import { apiSlice } from './apiSlice'

const entryAdapter = createEntityAdapter()

const initialState = entryAdapter.getInitialState({
  ids: [],
  entities: {},
})

export const entryApiSlice = apiSlice.injectEndpoints({
  endpoints: (builder) => ({
    initialState,
    getEntry: builder.query({
      query: (filters) => ({
        url: '/history',
        params: filters,
      }),
      transformResponse: (responseData) => {
        return entryAdapter.setAll(initialState, responseData)
      },
      providesTags: (result, error, arg) => …