Struggling with web pixel setup: where and how to call the create mutation?

[carecare]

Hi there,

I could use clarification to step 5 in the documentation for setting up a web pixel (https://shopify.dev/docs/apps/marketing/pixels/getting-started#step-5-create-a-web-pixel-setting-for...)

I understand that the create mutation must be called within the app, but my question is where & how. I've seen two posts here that offered solutions:

1. Put a button in the app UI --> this seems problematic from a UX perspective

2. Put in the web folder --> not popping up when I create a web pixel even after updating CLI

Additionally, even when I try to do the button solution, the query in the Shopify documentation throws errors.

So my ask is this, could someone share:

1.  The code for how they are calling this mutation
2.  Where in their app this code lives

Thank you all so much!!

[carecare · Accepted solution]

Is this the "correct" solution, idk, but it worked and after two days of ANGST I will take it 🙂

I was able to connect the widget by putting the graphql request in the app's loader function

export const loader = async ({ request }: LoaderFunctionArgs) => {
  // Authenticate with Shopify
  const { admin } = await authenticate.admin(request);

  const mutationResponse = await admin.graphql(
    `#graphql
      mutation webPixelCreate($webPixel: WebPixelInput!) {
        webPixelCreate(webPixel: $webPixel) {
          userErrors {
            field
            message
          }
          webPixel {
            settings
            id
          }
        }
      }
    `,
    {
      variables: {
        webPixel: {
          settings: {
            "accountID": 'Account_ID_45466_this_is_as_per_toml'           
          },
        },
      },
    }
  );

  if (!mutationResponse.ok) {
    console.error('Request failed', mutationResponse);
    return;
  }

  const data = await mutationResponse.json();
  console.log(data);
  
  return mutationResponse

};

And then I set up the loader in the the index function of app/routes/app._index.tsxP:

export default function Index() {
  const muatationResponse = useLoaderData<typeof loader>();
...
//// All of your other code
...

[nathanclement]

In case it helps people somewhere down the line, I have an app web pixel with settings that need to be customized by whoever has the app installed (so I cannot just put an account id in there and call it good)

These graphql queries took a little time to get working, but they are quite helpful:

/** I use this to get whatever app web pixel has been activated */
export const findWebPixelQuery = `#graphql
  query FindWebPixel {
    webPixel {
      id
      settings
    }
  }
`;

/** If I know an id, I use this (i.e. from a route) */
export const getWebPixelQuery = `#graphql
  query GetWebPixel($id: ID!) {
    webPixel(id: $id) {
      id
      settings
    }
  }
`;

/** Create the web pixel (I only want to do this once users of the app have entered in their custom settings) */
export const createWebPixelMutation = `#graphql
  mutation CreateWebPixel($webPixel: WebPixelInput!) {
    webPixelCreate(webPixel: $webPixel) {
      webPixel {
        id
        settings
      }
      userErrors {
        field
        message
      }
    }
  }
`;

/** Same as create, but updates one with a known id */
export const updateWebPixelMutation = `#graphql
  mutation UpdateWebPixel($id: ID!, $webPixel: WebPixelInput!) {
    webPixelUpdate(id: $id, webPixel: $webPixel) {
      userErrors {
        code
        field
        message
      }
      webPixel {
        id
        settings
      }
    }
  }
`;

/** Only need to know the id to delete */
export const deleteWebPixelMutation = `#graphql
  mutation DeleteWebPixel($id: ID!) {
    webPixelDelete(id: $id) {
      deletedWebPixelId
      userErrors {
        field
        message
      }
    }
  }
`;