Question 295004 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Call graphql query from form submit

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.

Tags:

2

Answers


  1. 0

    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

    Login or Signup to reply.
  2. 0

    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,
})
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search