标签: rtk-query

我想创建一个购物车，其中包含用户添加的产品列表并将其保存在 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", …

以下是我对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

我正在尝试使用 RTK 查询，但找不到如何使用 React 测试库为使用 RTK 查询请求的组件编写单元测试的好示例。

例如，我们有一个从服务器获取某些内容的列表的组件。如何模拟请求数据？我找到了一个用于mswjs模拟 API 测试的解决方案。

await new Promise((r) => setTimeout(r, 1000));但即使有了它，我仍然遇到一个问题：在检查集合中的某些内容是否存在之前，我需要添加。
也许，有人知道如何使用 RTK 查询测试组件？

我正在使用 RTK 查询进行 POST 调用。我能够将有效负载数据传递给我的查询，但我想访问我的transformResponse函数内的查询参数“id”。但发现没有办法这样做。

下面是我的代码

export const apiSlice = createApi({
  reducerPath: 'api',
  
  baseQuery: fetchBaseQuery({ baseUrl: '/fakeApi' }),
 
  endpoints: builder => ({
    
    getPosts: builder.query({
      
      query: ({id}) => ({ url, method: 'POST', body: { id } }),
      transformResponse: (response) => { console.log(response, id) } //How can I access the 'id' from query here?
    })
  })
})

如何访问函数内的查询负载transformResopnse？

我还尝试将传递arg给transformResponse函数，但arg对我来说是未定义的。

(response, meta, arg)

arg 对我来说是未定义的。

在RTK查询的文档中，这是向util提供的介绍fetchBaseQuery：

这是一个非常小的包装器fetch，旨在简化请求。axios它不是、superagent或任何其他重量级库的全面替代品，但它可以满足您的大部分需求。

好的，我知道 fetchBaseQuery 并不完美，但是什么时候应该使用 fetchBaseQuery 而不是axiosor superagent？

有哪些权衡？

我正在使用REDUX-TOOLKIT-QUERY，现在我有一种情况，我必须调用一个突变。一旦该突变返回响应，我就必须在其他三个突变中使用该响应作为请求参数。我们如何以正确的方式实施这一点？

const [getSettings, { isLoading, data: Settings }] =useSettingsMutation();
  const [getMenu] =useMenuMutation();
  const [getServices] = useServicesMutation();
  useEffect(() => {
    const obj = {
      Name: "someNme",
    };
    if (obj) getSettings(obj);
    if (Settings?._id ) {
      const id = settings._id;
       getServices(id);
     getMenu(id);
     getServices(id);
    }
  }, []);