FROM CACHE - en_header

[Network error]: ServerParseError: Unexpected token I in JSON at position

Mahdibn
New Member
2 0 0

Please i need your help graphql queries and mutations won't work. So i've been following the tutorials provided by shopify devs to create my first shopify app . And no matter what tutorial i follow  i always get this error "[Network error]: ServerParseError: Unexpected token I in JSON at position" .

Here's my code:(i'm using react and node)

index.js:

import { useCallback, useMemo, useState } from "react";
import { Button, Card, DataTable, EmptyState, Frame, Heading, Page, Stack, TextField, Toast } from "@shopify/polaris";
import { ResourcePicker } from "@shopify/app-bridge-react";
import { useMutation } from "react-apollo";
import { ProductUpdateMutation } from "../graphql/productUpdate";

const Index = () => {
  const [appendToTitle, setAppendToTitle] = useState('');
  const [appendToDescription, setAppendToDescription] = useState('');
  const [products, setProducts] = useState([]);
  const [showToast, setShowToast] = useState(false);
  const [pickerOpen, setPickerOpen] = useState(false);

  const [updateProduct] = useMutation(ProductUpdateMutation);

  const productPickerHandler = useCallback(() => setPickerOpen(true), []);

  const productTableDisplayData = useMemo(() => products.map((product) => [
    product.id,
    product.title,
    `${product.title}${appendToTitle}`,
    product.descriptionHtml,
    `${product.descriptionHtml}${appendToDescription}`
  ]), [products, appendToTitle, appendToDescription]);

  const submitHandler = useCallback(() => {
    let count = 0;
    const runMutation = (product) => {
      updateProduct({
        variables: {
          input: {
            descriptionHtml: `${product.descriptionHtml}${appendToDescription}`,
            title: `${product.title}${appendToTitle}`,
            id: product.id
          }
        }
      }).then((data) => {
          console.log('update Product', count, data);
          count++;
          if (products[count]) runMutation(products[count])
          else {
            console.log('Updates Complete');
            setShowToast(true);
          }
        })
      }
      runMutation(products[count]);
  },[products, appendToTitle, appendToDescription]);
const toastMarkup = showToast ?
  <Toast
    content="update successful"
    onDismiss={() => setShowToast(false)}
    duration={4000}
  /> : null;
return (
  <Frame>
    <Page>
      <Heading>Update your products</Heading>
      <Card>
        <Card.Section>
          <Stack vertical>
            <TextField
              label="Append to title"
              value={appendToTitle}
              onChange={setAppendToTitle}
            />
            <TextField
              label="Append to Description"
              value={appendToDescription}
              onChange={setAppendToDescription}
            />
            <ResourcePicker
              resourceType="Product"
              showVariant={false}
              open={pickerOpen}
              onSelection={(resources) => {
                setProducts(resources.selection);
                console.log(products);
              }}
            />
            <Button primary onClick={() => setPickerOpen(true)} > Select products </Button>
          </Stack>
        </Card.Section>
        <Card.Section>
          {productTableDisplayData.length ?
            <DataTable
              columnContentTypes={['text', 'text', 'text', 'text', 'text']}
              headings={['id', 'Old Title', 'New Title', 'Old Description', 'New Description']}
              rows={[productTableDisplayData]}
            />
            :
            <EmptyState heading="No products selected" />}
        </Card.Section>
        <Card.Section>
          <Button primary onClick={submitHandler} disabled={!products.length}> Submit changes </Button>
        </Card.Section>
      </Card>
      {toastMarkup}
    </Page>
  </Frame>
)
};

export default Index;

and here is my graphql file:

import { gql } from "apollo-boost";

export const ProductUpdateMutation = gql `
  mutation updateProduct($input: ProductInput!){
    productUpdate(input: $input){
      product{
        id
        description
        title
      }
      userErrors{
        message
        field
      }
    }
  }

`;

 

Replies 0 (0)