在 react-query 中使用 observables

Posted 2023-03-13

【中文标题】在 react-query 中使用 observables

【英文标题】：Using observables in react-query

【发布时间】：2021-09-17 03:43:10

【问题描述】：

我正在构建一个应用程序并计划将 rxjs 用于 Observables。但是，我喜欢 react-query 缓存功能，并希望将它们合并在一起以使其正常工作。

我遇到了错误代码不清楚的问题。

请指教。

import React,  FunctionComponent  from 'react';
import  render  from 'react-dom';
import  useQueryStream  from './useQueryStream';
import API from './apiService';
import './style.css';
import  Observable, of  from 'rxjs';
import  catchError, take  from 'rxjs/operators';

const Hello: FunctionComponent = () => 
  const fetchPokemon = <T>(): Observable<T[]> => 
    const data =  API.get<T[]>('pokemon?limit=100&offset=0').pipe(
      take(1),
      catchError(err => of(console.log(err)))
    ) as Observable<T[]>;

    console.log(data)
  ;

  const result = useQueryStream('data', fetchPokemon);
  return <>JSON.stringify(result, null, 2)</>;
;

export default Hello;

我还在扩展 react-query 以接受 observable 并订阅它并发送数据。

import  QueryFunction, useQuery, useQueryClient  from 'react-query';
import  Observable, combineLatest  from 'rxjs';
import  useEffect  from 'react';
import  UseQueryOptions  from 'react-query/types/react/types';

export const useQueryStream = (
  queryKey: string,
  fetcher: QueryFunction,
  config?: UseQueryOptions
) => 
  const queryClient = useQueryClient();
  const queryResult = useQuery(queryKey, fetcher, config);

  useEffect(() => 
    if (queryResult.data instanceof Observable) 
      queryResult.data.subscribe(
        next: data => 
          queryClient.setQueryData(queryKey, (currentQueryData: any) => 
            currentQueryData && combineLatest(currentQueryData, data);
          );
        ,
        error: error => 
          console.error(error);
        
      );
    
  , [queryKey, queryResult.data]);

  console.log('queryResult', queryResult);

  return queryResult;
;

这是我的 stackblitz 链接：https://stackblitz.com/edit/react-ts-3tqgbx?file=Hello.tsx

请就如何修复错误以及如何取回数据提出建议。

【参考方案1】：

由于这是一个.tsx 文件，因此您不能像以前那样使用通用的<T>，因为它将被解释为一个打开的组件/元素标签：

您可以改用常规函数语法：

function fetchPokemon<T>(): Observable<T[]> 
  ...

但是，如果你真的想使用箭头函数，你可以使用：

const fetchPokemon = <T,>(): Observable<T[]> => 
  ...

...或：

const fetchPokemon = <T extends >(): Observable<T[]> => 
  ...

【讨论】：

谢谢伙计。我使用了逗号，stackblitz 不断删除它，因为没有第二个参数。我现在看到了json。我没有在 JSON 中看到数据属性。我在 useQueryStream 中做错了什么？

@a2441918 我认为您需要从您的fetchPokemon 函数中return data，以及queryClient.setQueryData(queryKey, data)

谢谢。那行得通。 currentQueryData 呢？我应该担心吗？我从这里得到了原始源代码：github.com/tannerlinsley/react-query/issues/…

是否需要结合之前的数据？你的 API 调用 observable 不会只发出一次吗？如果是这样，也许您可​​以从 fetchPokemon 中删除 return data.toPromise() 并完全删除 useEffect...

所以我所做的就是删除 useQueryStream 并仅使用 useQuery 从数据中返回一个承诺，并且它起作用了。