Query return extended observable directly

[anymaniax]

I saw that when you execute useQuery currently it returns an object with a result$ property.

Did you think about the possibility to return an observable directly that you extend with some other properties?

Like here

[NetanelBasal]

I actually start with this approach, but it doesn't work with pipeable operators. For example:

// This will break the type
// You will not see the added methods
const projects$ = service.getProjects().pipe(tap())

[NetanelBasal]

41538f7#diff-1bef14e2637a11619849bb4e431011a04387dcb25bd49abd10f39a286a0609c5L104

[anymaniax]

I remember now I had this problem too 😅.

[anymaniax]

I am gonna check a bit today If I found something for the usePreviousData. But overall it's pretty nice! I hope that people will like and use this library!

[NetanelBasal]

My goal was to touch the bare minimum in the source code and provide the best DX we can have.

[NetanelBasal]

I removed the need for unsubscribing explicitly when using the updateQueryKey.

[anymaniax]

Exactly what I wanted too and I think it's the best approach. Just a bit sad about the pagination because all the rest is pretty cool and straightforward

[NetanelBasal]

Yes, but it's not that bad for what you get. Moreover, not everyone needs it.

[anymaniax]

I had an idea for the pagination and if we pass an observable to keepPreviousData and not just a boolean? and automatically update the queryKey when data observable changes? Did a test and it seems to work but feels a bit too much magic.

[NetanelBasal]

But let's continue thinking about this. You are in a good direction.

[anymaniax]

Totally agree with you but we can find a solution 😄

[NetanelBasal]

By the way, that does not solve the work of saving the reference, right? It's only to get rid of the imperative updateQuery.

[anymaniax]

indeed

[NetanelBasal]

Maybe we can introduce a new type that will save the reference and exposes a way to update the key, something like:

inject(PersistedQuery)(
    ['projects', page] as const,
    ({ queryKey }) => fetchProjects(queryKey[1]),
    { staleTime: 5000 }
);

[NetanelBasal]

@anymaniax I have come up with this solution:

export class PaginationService {
  private useQuery = inject(QueryProvider);

  getProjects = inject(PersistedQuery).use((key: ['projects', number]) => {
    return this.useQuery(key, ({ queryKey }) => fetchProjects(queryKey[1]), {
      staleTime: 5000,
      keepPreviousData: true,
    });
  });
}

  projects$ = this.page$.pipe(
    switchMap((page) => {
      return this.projectsService.getProjects(['projects', page]).result$
    })
  );

[NetanelBasal]

My only concern (that exists in the current implementation also) is what happens if we need to replace the queryFn. For example, we might have different parameters we need to pass to it.

[anymaniax]

Hey @NetanelBasal, it seems better. For the parameters, at one moment it will be a problem yes. If I remember well in the first version, react query had a special hook for pagination (useQueryPagination). it's also a possible solution no?

[NetanelBasal]

You can now pass params.

https://github.com/ngneat/query/blob/main/packages/playground/src/app/pagination-page/pagination.service.ts#L9
https://github.com/ngneat/query/blob/main/packages/playground/src/app/pagination-page/pagination-page.component.ts#L60

[anymaniax]

Sorry for the late answer but seems great. And congrats for the beta!