javascript - tRPC invalid hook call in react function component - Stack Overflow

I am trying to create a new user when the user connects to the site with their wallet.

When the user clicks the button to connect, the useAccount hook will return an address of type string.

I then want to create a new user with this address in my database using tRPC.

Currently, I am getting invalid hook call errors.

When a user clicks the button, the authHandler method is called which then calls this hook:

//hook to get account info
const account = useAccount();

const { connectAsync } = useConnect({
    connector: new InjectedConnector(),
    onSuccess: () => handleSuccessfulConnection(),
    onError: () => handleConnectionError(),
  });

Then the onSuccess callback executes this:

const handleSuccessfulConnection = (): void => {
    const { data } = trpc.user.createUser.useMutation(account.address);
    //runtime error here about invalid hook call
    console.log(data);
    setShowSuccessToast(true);
  };

Any way I can resolve this issue?

I am trying to create a new user when the user connects to the site with their wallet.

When the user clicks the button to connect, the useAccount hook will return an address of type string.

I then want to create a new user with this address in my database using tRPC.

Currently, I am getting invalid hook call errors.

When a user clicks the button, the authHandler method is called which then calls this hook:

//hook to get account info
const account = useAccount();

const { connectAsync } = useConnect({
    connector: new InjectedConnector(),
    onSuccess: () => handleSuccessfulConnection(),
    onError: () => handleConnectionError(),
  });

Then the onSuccess callback executes this:

const handleSuccessfulConnection = (): void => {
    const { data } = trpc.user.createUser.useMutation(account.address);
    //runtime error here about invalid hook call
    console.log(data);
    setShowSuccessToast(true);
  };

Any way I can resolve this issue?

• javascript
• reactjs
• typescript
• trpc.io

Share Improve this question Follow asked Dec 16, 2022 at 23:12 SeanSean 1,46633 gold badges1111 silver badges3131 bronze badges 1

• You can't call hooks like useMutation inside a function, so that's the issue. I can't tell you how to resolve because I don't know what that hook does nor what handleSuccessfulConnection is trying to do. – Robin Zigmond Commented Dec 16, 2022 at 23:18

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 8

useMutation is a hook, so you can't call it conditionally. Once you create the mutation, you can use its mutate to fire it.

function MyComponent(props: {foo: boolean}) {
  const myMutation = trpc.router.query.useMutation();

  if (!props.foo) return null; // can't call hooks after this
  
  function handleClick() {
    myMutation.mutate(inputArgs);
  }

  return (
    <button onClick={handleClick}>Click me</button>
  )
}