Custom Hook - useMutation

[jaydedm]

Hey, everyone. This library is amazing! Thank you to all those involved with its development.

I was wondering if anyone could provide some guidance on best practices for my use case.

I just want to extract my useMutations that are currently located inside my function component body to a helpers file.

It currently looks something like this:

const MyComponent = (): ReactElement => {
 
  const spPostResourceType = useMutation(
    async () => {
      return await sp.web.lists.getByTitle("Title").items.add({
        Title: newResourceTypeTitle,
        CountryId: selectedCountry,
      });
    },
    {
      onSuccess: () => {
        queryClient.invalidateQueries("myCache");
      },
    }
  );

return (
  <Button onClick={spPostResourcetype.mutate()}
)
}

Is it possible to move spPostResourceType out of this component and create a custom usePostResourceType hook without getting an invalid hook call outside of a function component?

Thanks!

[TkDodo]

without getting an invalid hook call outside of a function component?

No, you can only call hooks from other hooks or fictional components. Those are the rules of hooks. Why would you need to do that?

[jaydedm]

Good point @dusty.

Here's my current custom hook file then:

import { useMutation, useQueryClient } from "react-query";
import { useToasts } from "react-toast-notifications";
import { axiosDELETERequest } from "../serviceHelpers";

const queryClient = useQueryClient();
const { addToast } = useToasts();

const useDeleteResource = () => useMutation(
  async (selectedFilename) => {
    const domainPath =
      process.env.NODE_ENV === "dev" ? process.env.DOMAIN : "..";
    const url =
      domainPath +
      `/_api/web/lists/getbytitle('AC-HTA-Documents')/Files('${selectedFilename}')`;
    return await axiosDELETERequest(url);
  },
  {
    onSuccess: () => {
      queryClient.invalidateQueries("resourcetype-resources");
    },
    onError: () => {
      addToast("You are unauthorized to make this action.", {
        appearance: "error",
        autoDismiss: true,
      });
    },
  }
);

export default useDeleteResource;

And my component that uses the hook looks something like this:

const resourcesList = ():ReactElement => {
     const deleteResourceFile = useDeleteResource();
}

On app load, my app is crashing and giving me this error still:

 Invalid hook call. Hooks can only be called inside of the body of a function component

[jaydedm]

I can't use useQuery like that, right? Hmm..

[jaydedm]

changed my call to

  const deleteResourceFile = useDeleteResource(queryClient, addToast, selectedFilename);

[jaydedm]

We're in business now. Thanks, boiz

[TkDodo]

You still can’t call useToast etc outside of a hook. It needs to be:

const useDeleteResource = () => {
    const queryClient = useQueryClient();
    const { addToast } = useToasts();

    return useMutation(...)
}