在react-query中使用可观察对象

Question

我正在构建一个应用程序，并计划将rxjs用于可观察对象。然而，我喜欢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以接受一个可观察对象，并订阅它并发送数据。

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

请建议我如何修复错误以及如何恢复数据。

Answer 1

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

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

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

但是，如果您确实想使用箭头函数，则可以使用：

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

...or：

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