标签: rtk-query

我正在尝试测试 RTKQuery 是否已使用 jest 调用端点。

我最终还希望能够模拟返回数据是什么，但首先我只想检查挂钩是否已被调用。

在下面的示例中，我试图监视 myApi 以获取自动生成的 useGetMyListQuery 挂钩。

运行时会抛出错误，有人可以帮忙吗？

it('Should render', async () => {
    jest.spyOn(myApi, 'useGetMyListQuery')

    render(
      <Provider store={store}>
        <MyComponent />
      </Provider>
    )

    expect(myApi.useGetMyListQuery).toBeCalled()
})

我想创建一个购物车，其中包含用户添加的产品列表并将其保存在 localStorage 中。如果我们有 RTK 查询的代码，是否可以在 createApi() 中定义该购物车？如果没有，我怎样才能在另一个切片中使用它？

export const productApi = createApi({
  reducerPath: "productApi",
  baseQuery: fetchBaseQuery({ baseUrl: "http://127.0.0.1:8000/api/" }),
  tagTypes: ["Products"],
  endpoints: (builder) => ({
    SingleProduct: builder.query<IProduct, number>({
      query: (id) => `product/${id}/`,
      providesTags: (result, error, id) => [{ type: "Products", id }],
    }),
  }),
});

如果无法直接将购物车操作添加到 createApi，我如何提取 SingleProduct 并在此切片中使用它？

const cartSlice = createSlice({
  name: "cart",
  initialState,
  reducers: {
    addToCart: (state, action: PayloadAction<{ id: number, qty: number }>) => {
      const data = // what should i put here?
      state.push(data);

      localStorage.setItem("cartItems", …

如何在子组件内部访问父组件中调用的查询的数据，而无需进行 prop 钻取。

例如，如果在parent.js中我调用getPost查询

const {data} = useGetPostQuery();

那么我如何才能进一步访问层次结构中的这些数据呢？

我使用 rtk 查询，我想为除没有标头的刷新令牌之外的所有请求传递标头身份验证，这是我的代码有没有办法让条件或传递标头为空？或者我可以有 2 个 fetchBaseQuery ，一个用于标题，另一个用于刷新请求？

 const baseQuery = fetchBaseQuery({
    baseUrl: 'https://xr1.bernetco.ir/api/v1/',
    prepareHeaders: (headers, { getState }) => {
        const user = (getState() as RootState).user.currentUser

        if (user) {
            headers.set('Authorization', `Bearer ${user.token.access}`)
        }
        return headers
    },
    credentials: 'include', // This allows server to set cookies
})

const baseQueryWithReauth: BaseQueryFn<string | FetchArgs, unknown, FetchBaseQueryError> = async (
    args,
    api,
    extraOptions
) => {
    let result = await baseQuery(args, api, extraOptions)
    if (result.error && result.error.status === 401) {
        // try to get …

只是尝试模拟商店，然后使用 fetchMock 测试请求，但收到此错误：

您可以在以下位置查看完整的存储库：\n https://github.com/alibidjandy/layered-architecture

src/app/main/__tests__/main.test.tsx (5.569 s)\n

\xe2\x97\x8f 控制台

console.warn\n  Warning: `fetch` is not available. Please supply a custom `fetchFn` property to use `fetchBaseQuery` on SSR environments.\n\n   7 |   reducerPath: "productService",\n   8 |   tagTypes: ["product"],\n>  9 |   baseQuery: fetchBaseQuery({\n     |                            ^\n  10 |     baseUrl: serviceURL,\n  11 |   }),\n  12 |   endpoints: (builder) => ({}),\n\n  at fetchBaseQuery (node_modules/@reduxjs/toolkit/src/query/fetchBaseQuery.ts:180:13)\n  at Object.<anonymous> (src/app/main/data/api/service.ts:9:28)\n  at Object.<anonymous> (src/app/main/data/api/store.ts:3:1)\n

FAIL src/app/components/products/ tests /products -requests.test.tsx\n\xe2\x97\x8f 测试套件运行失败

src/app/components/products/__tests__/products-requests.test.tsx:14:3 - error TS2304: …

以下是我对useLazyQuery挂钩的实现：

const [trigger,
        { 
    loading: prodLoading,
    error: prodError, 
    data: prodData 
    }
  ] = prodApi.endpoints.getAllProducts.useLazyQuery();

其中参数分别result被解构为prodLoading、prodError。prodData当正确的参数传递给查询时，可以通过 访问所获取的产品prodData，但出现错误时不会通过 访问任何内容prodError，这让我想到了我的问题，我们如何处理挂钩中的错误useLazyQuery？

有什么方法可以获取isLoading我们error在useQuery挂钩中使用的参数吗？

const {data, error, isLoading, isSuccess} = useGetAllProductsQuery('', {skip,});

建议使用哪种方式使用 RTK 查询按顺序执行多个突变？

  const [
    updateProfile, 
  ] = useUpdateProfileMutation();

  const [
    updatePost,
  ] = useUpdatePostMutation();


  const performMutipleMuations = async () => {
    const data= await updateProfile(newData);
    await updatePost(data);
  };

我使用 createApi 创建了端点：

export const postsApi = createApi({
  reducerPath: 'postsApi',
  baseQuery: fetchBaseQuery({baseUrl: 'https://jsonplaceholder.typicode.com/'}),
  tagTypes: ['Post'],
  endpoints: builder => ({
    getPosts: builder.query<Post[], void>({
      query: () => '/posts',
      providesTags: ['Post'],
    }),
   }), 
});

export const {useGetPostsQuery} = postsApi;

如何useGetPostsQuery()仅在按下按钮时而不是在安装组件时使用组件中的钩子？

我尝试将其添加到组件中并且它有效，但我不确定这是否是最佳实践：

const [click, setClick] = useState<boolean>(true);
const {data, error, isLoading} = useGetPostsQuery(undefined, {skip: click});

我使用RTKQuery来获取数据，如下所示：

export const productsApi = createApi({
  reducerPath: 'productsApi',
  baseQuery: fetchBaseQuery({
    baseUrl: BASE_URL,
    prepareHeaders,
  }),
  tagTypes: ['Products'],
  keepUnusedDataFor: 8600,
  endpoints: builder => ({
    getProperties: builder.query<IProduct[], IParams>({
      query: params => ({ url: 'products', params: { per_page: 40, ...params } }),
      transformResponse: ({ data }: { data: IProduct[] }) => data,
      providesTags: ['Products'],
    }),
  });

我对 Redux Toolkit 比较陌生，在使用任何 Redux 之前直接开始使用它。从 ReduxToolkit 文档中，我找到了两种在后端捕获和放置操作的方法。

1. 使用异步重击。
2. 中间件

我尝试使用中间件方法使用如下代码：

export const rtkQueryErrorLogger: Middleware = (api: MiddlewareAPI) => next => action => {
  if (isRejected(action)) …

我对使用 RTK 查询完全陌生，我之前创建了应用程序，但没有身份验证，一切正常，现在我想使用 Auth0 添加身份验证，但我无法访问我添加getTokenSilently() PS 的任何文件。getTokenSilently 是 {token} 感谢您的帮助

export const myApi = createApi({
  reducerPath: "points",
  baseQuery: fetchBaseQuery({
    baseUrl: "/",
    prepareHeaders: (headers, { getState }) => {
      const token = getState()
      if (token) {
        headers.Authorization = `Bearer ${token}`
      }

      return headers
    },
  }),
  endpoints: builder => ({
    getPoints: builder.query({
      query: () => `/`,
    }),
  }),
})

export const { useGetPointsQuery } = myApi