Comments (7)
ah okay, then let's do that to make it at least passable ...
from query.
Not sure if it should work or if it works coincidentally. The queryOptions
are from the react package, while the observers are re-exported from the core. There are no type parameters on QueriesObserver
constructor, but there are on the QueryObserver
.
types for useQueries
are horrendously complex, and I don't want to bring them over to QueriesObserver
. What you can try is if widening this type signature:
to
queries: Array<QueryObserverOptions<any, any, any, any>>,
works.
On the other hand, I don't think it's expected that this works; if you're only depending on the core, you don't have access to queryOptions
, and if you use the react package, you likely shouldn't need to use the Observers directly :)
from query.
if you're only depending on the core, you don't have access to queryOptions, and if you use the react package, you likely shouldn't need to use the Observers directly :)
Sorry, I did not specify it in the initial issue, but I'm using both actually @tanstack/query-core
and @tanstack/react-query
😉
In our case we can have the same requests triggered from a react component or outside of a component, and we try to share as much code as possible between the different methods.
Here's an example of what I'm are trying to accomplish (where I have 3 ways to fetch the same data: with a function, with a React hook or within an observable (I'm using RxJS).
import { QueryClient } from '@tanstack/query-core';
import { queryOptions, useQuery, QueryObserver } from '@tanstack/react-query';
import { Subject } from 'rxjs';
export const queryClient = new QueryClient();
// My shared query options
export const getMyDataQueryOptions = () =>
queryOptions({
queryKey: ['myData'],
queryFn: async () => {
// Fetch data
// ...
return 'myData';
},
});
// Fetch data outside of a component
export const getMyData = () => queryClient.fetchQuery(getMyDataQueryOptions());
// Fetch data inside of a component
export const useMyData = () => useQuery(getMyDataQueryOptions());
// Fetch data as an observable
let subject: Subject<string>;
export const $getMyData = () => {
if (subject) {
return subject;
}
subject = new Subject();
const observer = new QueryObserver(queryClient, getMyDataQueryOptions());
observer.subscribe(result => {
if (!result.isSuccess) {
return;
}
subject.next(result.data);
});
return subject;
};
(using useQuery
and QueryObserver
here for simplicity, but the same apply for useQueries
/QueriesObserver
)
As you can see being able to reuse getMyDataQueryOptions()
in each method would be really useful in my case.
The
queryOptions
are from the react package
I didn't even notice it. Is there a reason for this? This function is also useful outside of React (see the getMyData
function in the example above)
types for
useQueries
are horrendously complex
I can believe you on this 😅
I don't want to bring them over to
QueriesObserver
When you say that is it because it is too complex and you do not have the time for this or because that something you do not want for some architectural reason? (just to know if you would be interested by a PR if I'm able to make this work 😇 )
from query.
but I'm using both actually @tanstack/query-core and @tanstack/react-query
usually not necessary because @tanstack/react-query
re-exports everything from the query-core
.
I don't know rxjs much but are you unsubscribing the observer correctly?
Is there a reason for this?
The type are slightly different for each adapter
When you say that is it because it is too complex and you do not have the time for this or because that something you do not want for some architectural reason?
A bit of both probably 😂 . If the widening to <any, any, any, any>
works, I'd accept a PR for that.
from query.
usually not necessary because @tanstack/react-query re-exports everything from the query-core.
Noted 👍
I don't know rxjs much but are you unsubscribing the observer correctly?
No, but I do not want to unsubscribe (our project is a bit particular on this point, but I think this is not important for our problem here 🙂)
The type are slightly different for each adapter
That's a good explanation (it raise a lot of other questions, but I'll open a discussion because that's a bit out of scope here 😅).
A bit of both probably 😂 . If the widening to <any, any, any, any> works, I'd accept a PR for that.
Haha. Ok 😄. The widening to <any, any, any, any>
works as it solve the TS error, but of course we miss the inference of the results. It's a good quick fix for now I suppose. I can submit a PR for this.
from query.
ah, if we miss inference then it's no good :/
from query.
By missing inference I mean that in the playground above the types of mySecondObserver
and myThirdObserver
will be QueriesObserver<QueryObserverResult[]>
(instead of QueriesObserver<[QueryObserverResult<string, Error>]>
that would have been ideal but require more work)
from query.
Related Issues (20)
- Function passed to `notifyOnChangeProps` cannot return `undefined` HOT 2
- React Query isStale is not working after upgrading react-native to 0.74 HOT 1
- useIsMutating gets stuck on page navigation when using mutation hook with NextJS Server Action if there's ongoing post requests
- `useInfiniteQuery` expects `pageParam` to be a number, but my backend returns a complex string cursor
- ReactQueryDevtoolsPanel no longer exists in v5
- Support TS `moduleResolution: node16` in `svelte-query`
- `QueryErrorResetBoundary` not reset after throwing error in component with `useSuspenseQuery` HOT 3
- Should tanstack/query Cache Pages Instead of Fetching on Each Pagination Click? HOT 3
- `retry` from `defaultOptions.queries.retry` is ignored when `retry: undefined` is used in useQuery's options HOT 6
- [vue-query] `useQuery` no longer accepts computed `queryOptions`
- queries stuck on loading state in Next.js layout.tsx HOT 4
- infiniteQueryOptions can't infer type if queryFn uses pageParam HOT 1
- broadcastClient: removing query from one tab removes it from all tabs, even if others still have observers HOT 2
- [angular-query] Accessing `.data` kicks off the `CreateQueryOptions` function
- useQuery unexpected behavior when set initialData HOT 1
- Typescript 5.4.5 and useInfiniteQuery requires avoidable type annotations HOT 3
- useQueries data typed as unknown when using skipToken and TypeScript 5.4.5 HOT 2
- Why for the first page only the `queryKey`'s `pagination` is a Proxy object and for the following pages not? HOT 2
- Solid-Query example returns repositoryQuery.data is undefined HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from query.