时间戳

首页 > 解决方案 > 在 react-query 中使用 observables

reactjs - 在 react-query 中使用 observables

问题描述

我正在构建一个应用程序并计划将 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

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

标签： reactjstypescriptrxjsrxjs-observablesreact-query

解决方案

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

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

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

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

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

...或者：

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

推荐阅读