Can I do refetch with injectInfiniteQuery?

[jon9090]

I saw refetch is possible with react-query:

const {status, data, error, refetch} = useQuery(myKey, fetchData, {
      manual: true,
    });

const onClick = () => { refetch() }

I wonder if it is also possible with @ngneat/query to use it with injectInfiniteQuery?

for example I want to do a search form, when I click on search it should "refetch" the query with the form data.

So in the submit event I want to call "refetch" and "reset" my query with new data.

I checked the example but i could not find any way to make the query run again:

import { Injectable } from '@angular/core';
import { injectInfiniteQuery } from '@ngneat/query';
import { Observable } from 'rxjs';

interface Post {
  id: number;
  name: string;
}

export interface Posts {
  data: Post[];
  nextId: number | null;
  previousId: number | null;
}

@Injectable({ providedIn: 'root' })
export class PostsService {
  #query = injectInfiniteQuery();

  getPosts() {
    return this.#query({
      queryKey: ['posts'],
      queryFn: ({ pageParam }) => {
        return getProjects(pageParam);
      },
      initialPageParam: 0,
      getPreviousPageParam: (firstPage) => firstPage.previousId,
      getNextPageParam: (lastPage) => lastPage.nextId,
    });
  }
}

function getProjects(c: number) {
  return new Observable<Posts>((observer) => {
    const cursor = c || 0;
    const pageSize = 5;

    const data = Array(pageSize)
      .fill(0)
      .map((_, i) => {
        return {
          name: 'Post ' + (i + cursor) + ` (server time: ${Date.now()})`,
          id: i + cursor,
        };
      });

    const nextId = cursor < 20 ? data[data.length - 1].id + 1 : null;
    const previousId = cursor > -20 ? data[0].id - pageSize : null;

    setTimeout(() => {
      observer.next({ data, nextId, previousId });
      observer.complete();
    }, 1000);
  });
}

[luii]

const {status, data, error, refetch} = useQuery(myKey, fetchData, {
manual: true,
});
const onClick = () => { refetch() }

In the form of your first snippet it is not possible to refetch, to achieve this, the base query would need to re-export the refetch and the other utility functions of the query-observer.

In the current base-query.ts file you would need to add this line to make this work:

...
  }).pipe(
    shareReplay({
      bufferSize: 1,
      refCount: true,
    }),
  );

  let cachedSignal: undefined | Signal<any>;
  const isNodeInjector = injector && (injector as any)['_tNode'];

  return {
    result$,
    refetch: queryObserver.refetch.bind(queryObserver), // <-- this line
    // @experimental signal support
    get result() {
      !isNodeInjector &&
        assertInInjectionContext(function queryResultSignal() {
          // noop
        });

      if (!cachedSignal) {
        cachedSignal = toSignal(this.result$, {
          requireSync: true,
          // R3Injector isn't good here because it will cause a leak
          // We only need the NodeInjector as we want the subscription to be destroyed when the component is destroyed
          // We check that it's a NodeInjector by checking if it has a _tNode property
          // Otherwise we just pass undefined and it'll use the current injector
          // and not the R3Injector that we pass in the service
          injector: isNodeInjector ? injector : undefined,
        });
      }

      return cachedSignal;
    },
  };

@NetanelBasal wouldnt it make sense to re-export all the utility functions that the observer has? Or atleast the really important ones?

@jon9090 But to make it work without this refetch function, you would need to create a queryfilter object and use the queryclient to invoke a refetch. See: QueryClient#queryclientrefetchqueries

[NetanelBasal]

We initially exposed the observer in version 1, but after reviewing React's implementation, where they don't expose it, I decided to remove it from our setup. Now, when there's a need to refetch data, I utilize the client API instead.

[NetanelBasal]

Btw the result object has a refetch function.

[NetanelBasal]

But in your case, I'd do something like this:

form.valueChanges.pipe(
  switchMap(value => {
      return this.myService.fetch(value)
  })
)

[jon9090]

Hi @NetanelBasal

Btw the result object has a refetch function.

Regarding your mention of a refetch function in the result object, I'm a bit puzzled. In the context of the @ngneat/query library, I haven't been able to locate a refetch function. The screenshot you provided doesn't seem to show this function either.

--
This is causing a bit of a challenge for me because I need the fetch to occur only upon form submission, not every time the form values change. Additionally, I'm uncertain how to integrate this with the query code structure, as the result$ object appears to be encapsulated within the function returned by the query. Could you possibly illustrate what you mean with a code example?

For instance, you suggested something like this:

form.valueChanges.pipe(
 switchMap(value => {
     return this.myService.fetch(value)
 })
)

However, I'm not sure how this fits into the overall structure, especially in relation to the refetch functionality you mentioned.

@luii

Sure, it seems like prefetchInfiniteQuery might be a suitable solution. Although, it appears that I need to use a different service.
I planning to explore this option further to see if it resolves my issues.

Thank you both @NetanelBasal @luii

[luii]

@jon9090 Please take a closer look on your screenshot from above, the type hint shows you that this is a Signal, thus you would need to invoke it first to receive the refetch function.

[jon9090]

@luii, my server expects to use limit and offset to retrieve the data.

The limit parameter determines how many posts are returned, while the offset parameter acts as a cursor.

The response from my server includes the data itself and information about how much data exists in total.

I can set the limit using the getPosts method. However, to calculate the offset, I need to determine how much data I already have.

I've examined the queryFn, and I'm wondering if it's possible to find out "how many queries have been made" in order to calculate the offset?

 getPosts(limit: number) {
   return this.#query({
     queryKey: ['posts'],
     queryFn: ({ pageParam, signal, direction, meta, queryKey }) => {
       console.log({ pageParam });
       // offset ??
       return toPromise({
         source: getProjects(limit, pageParam)
         signal,
       });
     },
     initialPageParam: 0,
     getPreviousPageParam: (firstPage) => firstPage.previousId,
     getNextPageParam: (lastPage) => lastPage.nextId,
   });
 }

[luii]

The only thing that comes to mind are the pages in the result itself.

this.getPosts(10).result().data.pages

[luii]

though im a bit confused on why do you want to calculate the offset. When pageParam * limit would give you the offset of the current query from the start.

[jon9090]

You are correct; after a second thought, it resolved my problems. pageParams is the counter.