useQueryClient inside a custom hook

[prime socket]

Hi,
I'm pretty new to React Query. I've done a pretty solid scan of docs, StackOverflow and the archive of QA here.

I've got a CRUD app with 'parent' queries (arrays of a given data type) and 'child' queries (a single instance of a data type). When mutating a child, I want both of the corresponding queries to update using setQueryData . To encapsulate this behaviour, I've written a custom hook, that can be called from within a component (ie when an edit form is submitted).

Custom hook:

const { useMutation, useQueryClient } = require("@tanstack/react-query");

function useMutateAndUpdate({parentQueryKey, childQueryKey, mutateFunction, isNew = false, onSuccess}) {
  
  const queryClient = useQueryClient();

  const mutation = useMutation({
    mutationFn: (data) => mutateFunction(data),
    onSuccess: ({screen: data}) => {
      // do some stuff to setQueryData in parent and child queries
      onSuccess(data);
    } 
  })
  return mutation;
}

export {useMutateAndUpdate}```

### Hook usage

I then call it from within my component with 

const saveOrUpdate = useMutateAndUpdate({
parentQueryKey: ['screens'],
childQueryKey: ['screens', {id: screen.id || 'new'}],
mutateFunction: screenActions.saveOrUpdate,
onSuccess: (data) => navigate(/screens/${data.id}),
isNew: _.isEmpty(screen.id)
});

I'd like to reuse this for various data types, and cover off the 'create a new' as well as the 'update an existing' use case.

The custom hook throws an error that 

`No QueryClient set, use QueryClientProvider to set one`

This isn't the case, there is definitely a `QueryClientProvider` wrapping my app.  I'm not sure why it would be inaccessible inside the hook.

I can work around this by passing the result of `useQueryClient` into the custom hook, but is that the only way this can work? Other hooks like `useState` can be used in a custom hook, so I'm not sure what I'm doing wrong here.

[mighty locust]

Hi. It definitely has nothing to do with a custom hook. Do you use NextJs or smth?

[prime socket]

No, this is just plain React, compiled with Webpack.

[prime socket]

I refactored it to pass the queryClient in, and now it returns the same error, but on the useMutation call, so I'm obviously not structuring my hook code correctly. Any example of a custom hook wrapping a react query hook that I can compare to?

[prime socket]

https://tanstack.com/query/v4/docs/react/guides/updates-from-mutation-responses has an example of something very similar

[mighty locust]

export function useActivateTeamMember() {
  const queryClient = useQueryClient();

  return useMutation({
    mutationFn: services.users.activateTeamMember,
    onSuccess: (data, uuid) => {
      queryClient.invalidateQueries(['team-members']);
      queryClient.invalidateQueries(['team-member', uuid]);
    },
  });
}

export function useTeamMember(uuid?: string) {
  return useQuery({
    queryKey: ['team-member', uuid],
    queryFn: () =>
      services.users.getTeamMembersByID(uuid).then((res) => res.data),
    enabled: !!uuid,
  });
}

Can you show your component where you use those hooks and its parent? Maybe the problem is somewhere up in the components tree?

Also check out this https://stackoverflow.com/a/66874876/10129797