Call graphql query from form submit

Question

I have a simple react app like

const [shoe, setShoe] = useState('')

formSubmit = () => {
    e.preventDefault()
        const { data } = useQuery<GetShoeDetailsQuery,GetShoeDetailsQueryVariables>(getShoeDetailsQuery, {
            variables: {
                name: String(shoe),
            },
        })
        console.log(data)
}

<form onSubmit={formSubmit}>
    <input type="text"
        onChange: (e: { target: { value: SetStateAction<string> } }) => {
            setShoe(e.target.value)
        },
    >
    <button></button>
</form>

so when the form is submitted it makes a graphql call

my problem is I get an error react-dom.development.js:14906 Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for on

How can I call the useQuery after the form is submitted.

Oktay YuzcanOktay Yuzcan 2,2931 gold badge8 silver badges17 bronze badges · Accepted Answer · 2023-11-29 11:18:10Z

Not sure what library you are using to work with GraphQL. If it is from apollo: Use useLazyQuery instead of useQuery

https://www.apollographql.com/docs/react/api/react/hooks/#uselazyquery

Jason MingJason Ming 2241 silver badge5 bronze badges · Accepted Answer · 2023-11-29 11:37:03Z

You can use refetch of useQuery.

const [shoe, setShoe] = useState('')
const { data, refetch } = useQuery(getShoeDetailsQuery, {
    variables: {
        name: String(shoe),
    },
})

formSubmit = () => {
    e.preventDefault()
    
    refetch();
}

<form onSubmit={formSubmit}>
    <input type="text"
        onChange: (e => {
          setShoe(e.target.value)
        },
    >
    <button></button>
</form>

In this case, the data will be fetched automatically when shoe changes.
You can disable this query from automatically running by setting skip: true.

const { data, refetch } = useQuery(getShoeDetailsQuery, {
    variables: {
        name: String(shoe),
    },
    skip: true,
})

Call graphql query from form submit