Redux Toolkit RTK Query 发送查询参数

Posted 2023-02-22

【中文标题】Redux Toolkit RTK Query 发送查询参数

【英文标题】：Redux Toolkit RTK Query sending query parameters

【发布时间】：2021-09-10 10:46:09

【问题描述】：

如何使用 Redux Toolkit RTK Query 将查询参数传递给 api？

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

const baseUrl = 'xxxxxxx';

export const postsApi = createApi(
  reducerPath: 'posts',
  baseQuery: fetchBaseQuery( baseUrl ),
  endpoints: (builder) => (
    getPostsByYear: builder.query(
      query: (start, end) =>  // Why is 'end' always undefined???
        return 
          url: 'posts/',
          params:  start, end ,
        ;
      ,
    ),
    getPosts: builder.query(
      query: () => 'posts/',
    ),

    getPostByID: builder.query(
      query: (name) => `posts/$name`,
    ),
  ),
);

export const  useGetPostsQuery, useGetPostsByYearQuery, useGetPostByIDQuery  = postsApi;

当尝试从组件传递参数时，似乎只能识别start 值。 year 由<PostOptions/> 组件中的选择元素更新。它使用useState 钩子。该值正确更新并调用useGetPostsByYearQuery，但end 参数始终未定义。所以，看来我没有正确定义 api 端点。有什么建议吗？我想要它做的就是以http://xxx/posts?start=start&end=end 的形式发送请求。

我什至尝试为 end 参数硬编码一个字符串值，例如useGetPostsByYearQuery(year, '2019')，但它仍然显示为 undefined 与 api 回调，所以我错过了一些更基本的东西。

const Post = () => 
 
  const year = useSelector((state) => state.postOptions.year);
  const yearPlusOne = parseInt(year, 10) + 1;
  const  data, error, isLoading  = useGetPostsByYearQuery(year, yearPlusOne);

  return (
    <SafeAreaView style=styles.container>
      <View style=styles.content>
        <PostHeading />
        <PostOptions></PostOptions>
      </View>
    </SafeAreaView>
  );
;

export default Post;

【问题讨论】：

没有太多可以添加到@slideshowp2 的答案，除了这个：query 只接受一个参数，这就是为什么你的end 给你带来问题。下面的答案很好地展示了如何解决这个问题:)

【参考方案1】：

QueryArg 是一个泛型类型。

interface EndpointDefinitionWithQuery<
  QueryArg,
  BaseQuery extends BaseQueryFn,
  ResultType
> 
  query(arg: QueryArg): BaseQueryArg<BaseQuery>

见source code。

来自文档Defining Query Endpoints：

如果query 回调需要额外的数据来生成 URL，它应该被写成接受一个参数。如果您需要传入多个参数，请将它们格式化为单个“选项对象”。

因此您可以像这样为builder.query 方法声明泛型参数QueryArg 类型：

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

const baseUrl = 'xxxxxxx';

export const postsApi = createApi(
  reducerPath: 'posts',
  baseQuery: fetchBaseQuery( baseUrl ),
  endpoints: (builder) => (
    getPostsByYear: builder.query<any,  start: string; end: string >(
      query: (arg) => 
        const  start, end  = arg;
        console.log('arg: ', arg);
        return 
          url: 'posts/',
          params:  start, end ,
        ;
      ,
    ),
  ),
);

export const  useGetPostsByYearQuery  = postsApi;

并像这样传递查询参数：

import React from 'react';
import  useGetPostsByYearQuery  from './hooks';

export default function App() 
  const  data, error, isLoading  = useGetPostsByYearQuery( start: '2019', end: '2021' );
  return <div>app</div>;

日志：

arg:   start: '2019', end: '2021' 

版本："@reduxjs/toolkit": "^1.6.0"