onSettled/Success/Error being deprecated - how to handle going forward?

[ffxsam]

Currently, we do something like this:

const { data, isFetching } = useQuery({
  queryKey: ['billingInfo'],
  queryFn: getBillingInfo,
  onError: (error: GraphQLError) => {
    reportError(error, {
      while: 'fetching billing information',
    });
  },

With the on* callbacks going away, this becomes a lot more cumbersome:

const { data, error, isFetching, status } = useQuery({
  queryKey: ['billingInfo'],
  queryFn: getBillingInfo,
});

watch(status, (newStatus) => {
  if (newStatus === 'error') {
    reportError(error, {
      while: 'fetching billing information',
    });
  }
});

Is there a cleaner way? Why are the on* callbacks being deprecated?

[TkDodo]

here's what I would do:

const queryClient = new QueryClient({
  queryCache: new QueryCache({
    onError: (error, query) => {
      const options = query.meta.reportError
      reportError(error, options)
    }
  })
})

then use it like this:

const { data, error, isFetching, status } = useQuery({
  queryKey: ['billingInfo'],
  queryFn: getBillingInfo,
  meta: {
    reportError: {
      while: 'fetching billing information'
    }
  }
});

if its enough to include the QueryKey in the error reporting, its even easier:

onError: (error, query) => {
  const options = query.meta.reportError
  reportError(error, {
    while: `fetching ${JSON.stringify(query.queryKey)}`
  })
}

but with meta, you have total control.

[ffxsam]

This doesn't seem to work.

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      keepPreviousData: true,
      refetchOnWindowFocus: false,
    },
  },
  queryCache: new QueryCache({
    onError: (error, query) => {
      console.log('error?');

      const options = query.meta?.reportError as Parameters<
        typeof reportError
      >[1];

      options && reportError(error as Error | GraphQLError[], options);
    },
  }),
});

And then in my code, elsewhere:

const { data, isFetching } = useQuery({
  queryKey: ['paymentMethods'],
  queryFn: getPaymentMethods,
  meta: {
    reportError: {
      while: 'testing stuff',
    },
  },
});

I sabotage getPaymentMethods so it will bomb, but I never see my console.log message, even though a GraphQL error is indeed being thrown.

[ffxsam]

It seems like this is not being used as the global query client, because I noticed when I switch to another window, then back to the browser, it refetches, and I'm setting that option to false.

[TkDodo]

can't really say much here, the code should work. Not sure if getPaymentMethods returns a rejected Promise, you mentioned GraphQL, not sure how you fetch underneath but GraphQL is known to me as the thing that always returns 200 OK for everything 😅 . Simple stuff, try with:

queryFn: () => Promise.reject(new Error("error"))

I noticed when I switch to another window, then back to the browser, it refetches, and I'm setting that option to false.

Again, impossible to say without seeing the whole code; not sure if you pass that QueryClient to the Provider etc or what you do with. Could you put that in a codesandbox or stackblitz please.

[ffxsam]

First off, thank you for taking the time to look at this! I appreciate your time.

https://stackblitz.com/edit/vitejs-vite-ehqdns?file=src%2Fmain.ts,src%2FApp.vue&terminal=dev

I'm quite sure I'm doing something wrong. 😅 One thing I don't understand about TanStack is where the default query client comes from. I can set default options in one module, and then it magically works everywhere I use useQuery or useMutation. But in this case, it seems like defining a custom query cache doesn't just make it the default query client. I like just being able to use useQuery, so hopefully I don't have to import this custom query client everywhere I use it.

[TkDodo]

sorry, I don't know much about vue. Have a look at the examples, they are implemented with a syntax that's a bit different from what you're doing

[ffxsam]

Just wanted to post the solution here. The missing key was to pass the custom client to the Vue plugin init, in main.ts:

app.use(VueQueryPlugin, {
  queryClient: new QueryClient({
    queryCache: new QueryCache({
      onError: (error, query) => {
        if (query.meta?.errorMessage) {
          console.error('uh oh!', query.meta.errorMessage);
        }
      },
    }),
  }),
});

Works great!