Improve error/success callback handling with react query

[slavastartsev]

Description

Ideal case of handling errorMessage | onError | onSuccess callback is passing them through meta property

const queryClient = new QueryClient({
  queryCache: new QueryCache({
    onError: (error, query) => {
      if (query.meta.errorMessage) {
        toast.error(query.meta.errorMessage)
      }
    },
  }),
})

export function useTodos() {
  return useQuery({
    queryKey: ['todos', 'list'],
    queryFn: fetchTodos,
    meta: {
      errorMessage: 'Failed to fetch todos',
    },
  })
}

In order to support typedefs we need to override Register interface from @tanstack/react-query | @gobob/react-query

import '@gobob/react-query';
import { DefaultError, Query } from '@gobob/react-query';

// https://tanstack.com/query/latest/docs/framework/react/typescript#typing-meta
interface CustomQueryMeta extends Record<string, unknown> {
  onSuccess?: ((data: unknown, query: Query<unknown, unknown, unknown>) => void) | undefined;
  onError?: ((error: DefaultError, query: Query<unknown, unknown, unknown>) => void) | undefined;
  onSettled?:
    | ((data: unknown | undefined, error: DefaultError | null, query: Query<unknown, unknown, unknown>) => void)
    | undefined;
}

declare module '@gobob/react-query' {
  interface Register extends Record<string, unknown> {
    queryMeta: CustomQueryMeta;
  }
}

More details in tanstack docs https://tanstack.com/query/latest/docs/framework/react/typescript#typing-meta

Having that setup we can remove useEffect hooks in favour of using onSuccess, onError, onSettled callbacks