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

Technical Q&A
2

Is this the “correct” solution, idk, but it worked and after two days of ANGST I will take it :slightly_smiling_face:

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
1 Like