[question]Why does this error(Hooks can only be called inside of the body of a function component) occurs?

[liaodalin19903]

Reference:
This code: electron-trpc demo

I have created a corresponding demo: electron-10-demo-etrpc.

However, when running it, an error occurs:

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM).
2. You might be breaking the Rules of Hooks.
3. You might have more than one copy of React in the same app.

The error is reported in the file src/renderer/src/HelloElectron.tsx at this line:

const res = trpcReact.greeting.useQuery({ name: 'Electron' }); // when execute this line it report error

This line of code is not written outside of a functional component. (this is because: All hooks( including custom hooks) must run as part of component render. It cannot be run as part of event handlers.)

===

I think it is normal for click handler to trigger subscribe event. Is there any other way to avoid this error?

[biw]

trpcReact.greeting.useQuery is a hook, so it cannot be in the callback. I would take a look at the TRPC docs, since your issue is a TRPC usage issue rather than electron-trpc https://trpc.io/docs/client/react/useQuery

[liaodalin19903]

Solved it by:

  const greetingQuery = trpcReact.greeting.useQuery({ name: 'Electron' });  // when execute this line it report error

  const clickHandle = () => {

    console.log('clicked')
    const data = greetingQuery.data

    console.log('greeting return data: ', data)

  }