9 replies

api.withTRPC doesn't show isLoading or isRefetching on cache invalidation

I am using the default t3 app with Prisma, next auth, trpc and typescript currently , it's my first time with next in general so still getting the hang of things so bare with me.

I've wrapped one of my pages (

/vm

/vm

) with api.withTRPC

export default api.withTRPC(VMS)

export default api.withTRPC(VMS)

so that the data is fetched for queries on the server before returning the page (At least this is my understanding, follow up queries are streamed still). However, in another component, I've attempted to invalidate my query with the following code

const utils = api.useContext();

const onClick = () => {
  utils.vm.getAll.invalidate();
}

const utils = api.useContext();

const onClick = () => {
  utils.vm.getAll.invalidate();
}

I've noticed that this doesn't seem to do anything, when I am using this query in my

/vm

/vm

route, if I destructure isLoading, isRefetching and isFetching from api.vm.getAll.useQuery(), none of these actually get set to true and as a matter of fact, the entire component doesn't get a re-render which I can just test by putting in a console log in the component.

If I opt not to wrap the export with

withTRPC

withTRPC

then it works completely fine but also doesn't fetch the data before returning the page which causes an annoying loading animation every time I load the page for the first time. I can probably adjust my loading animation accordingly but I'd prefer to get to the bottom of this so I can avoid building an SPA in Next lol.

As a quick snippet, I've implemented my vm subrouter the exact same as the example router

export const vmRouter = createTRPCRouter({
  /**
   * Queries
   */
  getAll,
  ... //other queries

  /**
   * Mutations
   */
  //other mutations
});

export const vmRouter = createTRPCRouter({
  /**
   * Queries
   */
  getAll,
  ... //other queries

  /**
   * Mutations
   */
  //other mutations
});

This behavior is also identical whether I have

ssr: true

ssr: true

ssr: false

ssr: false

Happy to take this question to a TRPC forum instead if this is too specifically a TRPC problem but figured I'd ask, I'm sure this is something either super obvious or just something being done wrong but thanks in advance for the help.

api.withTRPC doesn't show isLoading or isRefetching on cache invalidation

/vm

/vm

) with api.withTRPC

export default api.withTRPC(VMS)

export default api.withTRPC(VMS)

const utils = api.useContext();

const onClick = () => {
  utils.vm.getAll.invalidate();
}

const utils = api.useContext();

const onClick = () => {
  utils.vm.getAll.invalidate();
}

I've noticed that this doesn't seem to do anything, when I am using this query in my

/vm

/vm

withTRPC

withTRPC

export const vmRouter = createTRPCRouter({
  /**
   * Queries
   */
  getAll,
  ... //other queries

  /**
   * Mutations
   */
  //other mutations
});

export const vmRouter = createTRPCRouter({
  /**
   * Queries
   */
  getAll,
  ... //other queries

  /**
   * Mutations
   */
  //other mutations
});

This behavior is also identical whether I have

ssr: true

ssr: true

ssr: false

ssr: false

api.withTRPC doesn't show isLoading or isRefetching on cache invalidation

api.withTRPC doesn't show isLoading or isRefetching on cache invalidation

Similar Threads

Similar Threads

Similar Threads