Comments (6)
Done
from query.
After a brief investigation, I started to think that this might be solved by changing f.e. this:
query/packages/ng-query/src/lib/query-client.ts
Lines 5 to 21 in c67c802
in the following way:
@Injectable({
provideIn: 'root'
})
export class QueryClient extends QueryCore {
private options = inject(QUERY_CLIENT_OPTIONS);
constructor() {
super({
...this.options,
defaultOptions: {
...this.options?.defaultOptions,
queries: {
staleTime: Infinity,
...this.options?.defaultOptions?.queries,
},
},
});
}
}
Haven't tested it tho, the electricity in my city went off
from query.
We can expose the class providers. The issue is naming.
from query.
This is my suggestion - https://github.com/ngneat/query/pull/51/files
from query.
Because QueryClient is an InjectorToken, so you can use this one:
type UnwrapInjectionToken<TypeInjectionToken extends InjectionToken<unknown>> =
TypeInjectionToken extends InjectionToken<infer Wrapped> ? Wrapped : unknown;
@Injectable({
providedIn: 'root',
})
export class TodosService {
// private http = inject(HttpClient);
// private queryClient = inject(QueryClient);
// private useQuery = inject(QueryProvider);
// private useMutation = inject(MutationProvider);
constructor(
private http: HttpClient,
@Inject(QueryClient)
private queryClient: UnwrapInjectionToken<typeof QueryClient>,
@Inject(QueryProvider)
private useQuery: UnwrapInjectionToken<typeof QueryProvider>,
@Inject(MutationProvider)
private useMutation: UnwrapInjectionToken<typeof MutationProvider>
) {}
getTodos() {
return this.useQuery(['todos'], () => {
return this.http.get<Todo[]>(
'https://jsonplaceholder.typicode.com/todos'
);
});
}
addTodoOriginal() {
return this.useMutation(({ title }: { title: string }) => {
return this.http
.post<Todo>(`https://jsonplaceholder.typicode.com/todos`, { title })
.pipe(
tap(() => {
this.queryClient.invalidateQueries(['todos']);
})
);
});
}
addTodoBuiltIn({ title }: { title: string }) {
return this.http
.post<Todo>(`https://jsonplaceholder.typicode.com/todos`, { title })
.pipe(
tap(() => {
this.queryClient.invalidateQueries(['todos']);
})
);
}
getTodo(id: number) {
return this.useQuery(['todo', id], () => {
return this.http
.get<Todo>(`https://jsonplaceholder.typicode.com/todos/${id}`)
.pipe(delay(1000));
});
}
}
from query.
My misunderstanding was more about "why InjectionToken
is used here?" and "why it can't be implemented a class?".
Now I realize that while QueryClient
can be rewritten as an injectable class, but MutationProvider
, IsFetchingProvider
, IsMutatingProvider
, PersistedQueryProvider
, InfiniteQueryProvider
- can not.
The reason for this is DX that this library tries to achieve.
MutationProvider
, IsFetchingProvider
, IsMutatingProvider
, PersistedQueryProvider
, InfiniteQueryProvider
are meant to be used as function calls: useMutation()
, useIsFetching()
, useIsMutating()
, usePersistedQuery()
, useInfiniteQuery()
. So, to provide a function-like experience they can't be implemented in other than InjectionToken
way (classes aren't callable).
QueryClient
is already a class so my code above might work without breaking the initial DX.
Overall, I'd like to see this library allowing the best DI experience for both worlds 🙌:
✔️ shiny new inject()
based
🚫 safely typed constructor-based (so without @Inject()
stuff and manual typing)
from query.
Related Issues (20)
- SSR snippets outdated? HOT 1
- provideQueryClientOptions changes behaviour of queries even when not changing any default properties HOT 2
- Add `mapResultsData` operator to `README.md` and the playground
- TanStack Query v5 support HOT 8
- Missing type for the returned observable in `base-query`
- Support an observable in queryFn like we had in v1 HOT 1
- Sync `mutate` function is missing the mutation options as parameter HOT 4
- Break the object reference of the result returned by the base query/mutation HOT 3
- DevTools Not Showing Queries After Updating from 2.0.0-beta.7 to 2.0.0-beta.8 HOT 2
- Cannot find module '@tanstack/query-core/build/legacy/queryClient-b7fce2ff' HOT 2
- Export MutationResult and CreateMutationOptions
- createSuccessObserverResult should also take a generic error HOT 3
- Add refetch to intersectResults HOT 6
- mutate function should subscribe to mutationObserver HOT 1
- Automatically unsubscribe query observable HOT 1
- Failure to deduplicate network requests HOT 12
- multiple fired network HOT 2
- onSuccess is never triggered when passed as option to mutate HOT 3
- Add mapResultsData operator
- Allow constructor injection for QueryClientService HOT 6
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.