如何使用 RTK 查询创建搜索和过滤功能

Question

我需要创建一个搜索和过滤功能，仅过滤和显示 RTK 查询缓存数据的搜索结果，并且当用户删除过滤器时，它应该显示所有缓存数据。最好的方法是什么？

我想到创建一个本地状态变量，更新本地状态变量中的缓存数据，并使用状态显示数据。在过滤时，我使用过滤逻辑并使用过滤函数的返回值更新状态变量，这是正确的方法，还是有其他方法可以使用 RTK 查询来做到这一点？

Answer 1

您可以使用多种选项来过滤获取/查询的数据。

• 让服务器承担繁重的工作

  如果您的 API 端点支持查询参数，那么最好让更强大的后端服务器执行任何排序/过滤。在请求中传递您希望如何过滤/排序/等响应数据。

  示例：

  export const api = createApi({
    reducerPath: 'api',
    baseQuery: fetchBaseQuery({ baseUrl: 'https://my.domain.co/api/' }),
    endpoints: (builder) => ({
      getData: builder.query({
        query: ({ options }) => `getdata?key=${options.key}&sortBy=${options.sortBy}`,
      }),
    }),
  })
  

  const { data } = useGetDataQuery({
    options: {
      key: "someKey",
      sortBy: "date",
    }
  });
  

• 使用

  useQuery

  钩子的

  selectFromResult

  在前端进行过滤

  const { data } = useGetDataQuery(undefined, {
    selectFromResults: ({ data }) => ({
      data: data?.filter(....).sort(....);
    }),
  });
  

• 渲染时在前端内嵌过滤

  const { data } = useGetDataQuery();
  
  ...
  
  return (
    ...
    {data?
      .filter(....)
      .sort(....)
      .map(....)
    }
    ...
  );
  

  或已记忆

  const { data: rawData } = useGetDataQuery();
  
  const data = React.useMemo(() => rawData?
    .filter(....)
    .sort(....),
    [rawData, /* filter value, sortBy value, etc */]
  );
  
  ...
  
  return (
    ...
    {data?.map(....)}
    ...
  );