I was following a tutorial on building Shopify apps and I got an error: invalid hook call.

The error happens on useMutation

const Index = () => {
   const [updateProduct] = useMutation(PRODUCT_UPDATER)
   const submitHandler = useCallback(() => {
    let count = 0
    const runMutation = (product) => {
      updateProduct({
        variables: {
          input: {
            descriptionHtml: `${product.descriptionHtml}${descriptionValue}`,
            title: `${product.title}${titleValue}`,
            id: product.id
          }
        }
      }).then((data) => {
        console.log('Update Product', count, data);
        count  ;
        if(products[count]) runMutation(products[count])
        else {
          console.log('Update Complete');
        }
      })
    }
    runMutation(products[count])
  
  }, [products, descriptionValue, titleValue]);
  return (
    <Page>
      <Card>
            <TextField
              label="Title"
              value={titleValue}
              onChange={setTitleValue}
            />
            <TextField
              label="Description"
              value={descriptionValue}
              onChange={setDescriptionValue}
            />
            <ResourcePicker
              resourceType="Product"
              showVariants={false}
              open={pickerOpen}
              onSelection={(resource) => {
                console.log(resource)
                setProducts(resource.selection)
              }}
            />
            <DataTable
            columnContentTypes={['text', 'text', 'text', 'text', 'text']}
            headings={['ID', 'Old title', 'New title', 'Old description', 'New description']}
            rows={productTableDisplayData}
          />
          <Button primary disabled={!productTableDisplayData.length} onClick={submitHandler}>Submit</Button>
      </Card>
    </Page>

) }; export default Index;

I did not post the graphql mutation because i thought it's just a hook problem.

CodePudding user response：

you should return some jsx after useCallback

if this is a hook, rename it to useIndex, or anything with a use in front of the name

CodePudding user response：

You should use the return statement like so:

const Index = () => {
   const [updateProduct] = useMutation(PRODUCT_UPDATER)
   const submitHandler = useCallback(() => {
    let count = 0
    const runMutation = (product) => {
      updateProduct({
        variables: {
          input: {
            descriptionHtml: `${product.descriptionHtml}${descriptionValue}`,
            title: `${product.title}${titleValue}`,
            id: product.id
          }
        }
      }).then((data) => {
        console.log('Update Product', count, data);
        count  ;
        if(products[count]) runMutation(products[count])
        else {
          console.log('Update Complete');
          setShowToast(true);
        }
      })
    }
    runMutation(products[count])
  
  }, [products, descriptionValue, titleValue]);

  return (
      <div>
          // some components
      </div>
  )
}

export default Index;

As a side note to export the component and use it in other components use export default Index