Using observables in react-query - reactjs

Question

I am building out an app and planning to use rxjs for Observables. However, I like react-query cache functionality and would like to merge them together to get it working.
I am facing an issue where the error code is not clear to me.
Please advice.
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;
I am also extending react-query to accept an observable and subscribe to it and send the data.
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;
};
This is my stackblitz link: https://stackblitz.com/edit/react-ts-3tqgbx?file=Hello.tsx
Please advice on how I fix the error and how I get the data back.

Answer 1

As this is a .tsx file, you cannot use the generic <T> as you have because it will be interpreted as an opening component/element tag:
You can use regular function syntax instead:
function fetchPokemon<T>(): Observable<T[]> {
...
}
However, if you really want to use an arrow function, you can use:
const fetchPokemon = <T,>(): Observable<T[]> => {
...
}
...or:
const fetchPokemon = <T extends {}>(): Observable<T[]> => {
...
}