feat(app/get_started): created graphql mutation

apps/get_started/components/GraphQLMutation.js

+import { useState } from "react";
+import { Mutation } from "react-apollo";
+import { Frame, Banner, Toast } from "@shopify/polaris";
+
+export const GraphQLMutation = ({ children, query }) => {
+  return (
+    <Mutation mutation={query}>
+      {(handleSubmit, response) => {
+        const { error, data } = response;
+
+        let showError;
+        let showToast;
+        if (error) {
+          showError = error && (
+            <Banner status="critical">{error.message}</Banner>
+          );
+        } else if (data) {
+          showToast = <Toast content="Sucessfully updated" duration={1000} />;
+        }
+
+        return (
+          <Frame>
+            {children({
+              handleSubmit,
+              response,
+              showError,
+              showToast,
+            })}
+          </Frame>
+        );
+      }}
+    </Mutation>
+  );
+};

apps/get_started/pages/banner-config.js

 import { useState, useCallback } from "react";
 import { Layout, Page, AccountConnection, Link } from "@shopify/polaris";
+import { GraphQLMutation } from "../components/GraphQLMutation";
+import { CREATE_SCRIPT_TAG } from "../services/theme";
 
 const BannerConfig = () => {
   const [connected, setConnected] = useState(false);
   const accountName = connected ? "Jane Appleseed" : "";
 
-  const handleAction = useCallback(() => {
-    setConnected((connected) => !connected);
-  }, [connected]);
+  const handleAction = useCallback(
+    (handleSubmit) => {
+      setConnected((connected) => !connected);
+      handleSubmit({
+        variables: {
+          input: { src: "https://www.google.com/" },
+        },
+      });
+    },
+    [connected]
+  );
 
   const buttonText = connected ? "Disable" : "Enable";
   const details = connected ? "Active" : "Inactive";
@@ -19,21 +29,29 @@ const BannerConfig = () => {
   );
 
   return (
-    <Page>
-      <Layout.Section>
-        <AccountConnection
-          accountName={accountName}
-          connected={connected}
-          title="Banner Configuration"
-          action={{
-            content: buttonText,
-            onAction: handleAction,
-          }}
-          details={details}
-          termsOfService={terms}
-        />
-      </Layout.Section>
-    </Page>
+    <GraphQLMutation query={CREATE_SCRIPT_TAG}>
+      {({ handleSubmit, showError, showToast }) => {
+        return (
+          <Page>
+            <Layout.Section>
+              {showError}
+              {showToast}
+              <AccountConnection
+                accountName={accountName}
+                connected={connected}
+                title="Banner Configurations"
+                action={{
+                  content: buttonText,
+                  onAction: () => handleAction(handleSubmit),
+                }}
+                details={details}
+                termsOfService={terms}
+              />
+            </Layout.Section>
+          </Page>
+        );
+      }}
+    </GraphQLMutation>
   );
 };
 export default BannerConfig;

apps/get_started/services/theme/index.js

+import { CREATE_SCRIPT_TAG } from "./queries";
+
+export { CREATE_SCRIPT_TAG };

apps/get_started/services/theme/queries.js

+import gql from "graphql-tag";
+
+export const CREATE_SCRIPT_TAG = gql`
+  mutation scriptTagCreate($input: ScriptTagInput!) {
+    scriptTagCreate(input: $input) {
+      scriptTag {
+        id
+      }
+      userErrors {
+        field
+        message
+      }
+    }
+  }
+`;