title: Using observables in react-query
body: <p>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.</p>
  <p>I am facing an issue where the error code is not clear to me.</p>
  <p>Please advice.</p>
  <pre><code>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 = () =&gt; {
    const fetchPokemon = &lt;T&gt;(): Observable&lt;T[]&gt; =&gt; {
      const data =  API.get&lt;T[]&gt;('pokemon?limit=100&amp;offset=0').pipe(
        take(1),
        catchError(err =&gt; of(console.log(err)))
      ) as Observable&lt;T[]&gt;;
  
      console.log(data)
    };
  
    const result = useQueryStream('data', fetchPokemon);
    return &lt;&gt;{JSON.stringify(result, null, 2)}&lt;/&gt;;
  };
  
  export default Hello;
  </code></pre>
  <p>I am also extending react-query to accept an observable and subscribe to it and send the data.</p>
  <pre><code>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
  ) =&gt; {
    const queryClient = useQueryClient();
    const queryResult = useQuery(queryKey, fetcher, config);
  
    useEffect(() =&gt; {
      if (queryResult.data instanceof Observable) {
        queryResult.data.subscribe({
          next: data =&gt; {
            queryClient.setQueryData(queryKey, (currentQueryData: any) =&gt; {
              currentQueryData &amp;&amp; combineLatest(currentQueryData, data);
            });
          },
          error: error =&gt; {
            console.error(error);
          }
        });
      }
    }, [queryKey, queryResult.data]);
  
    console.log('queryResult', queryResult);
  
    return queryResult;
  };
  </code></pre>
  <p>This is my stackblitz link:  <a href="https://stackblitz.com/edit/react-ts-3tqgbx?file=Hello.tsx" rel="nofollow noreferrer">https://stackblitz.com/edit/react-ts-3tqgbx?file=Hello.tsx</a></p>
  <p>Please advice on how I fix the error and how I get the data back.</p>