How to connect a Webpixel in a Remix App?

[PeaceOut]

Hey everyone,

It's been a few days now I have a roadblock, so I would love to pick your brains.

I have an app that's I'm trying to build and I need to install & connect a Webpixel at the app installation.

So far I managed to create the Webpixel app extension and I can see the pixel in the backend as not connected. 

I managed to connect the Webpixel by manually using GraphiQL.

But I'd like to be able to do this automatically at the app installation. 

I can't seem to find a way to make this GraphQL query work in Remix and I don't know where it should be located in the project.

[Small_Task_Help]

Hi,

Hope following will help

- Go to setup part of your Remix app.
- Use GraphQL API to send a request.
Here is the code example

import { shopifyApi, LATEST_API_VERSION } from "@shopify/shopify-api";

export async function setupWebPixel(shop, accessToken) {
  const client = new shopifyApi.clients.Graphql({
    shop,
    accessToken,
    apiVersion: LATEST_API_VERSION,
  });

  const mutation = `
    mutation ConnectWebPixel($webPixelId: ID!) {
      webPixelUpdate(id: $webPixelId, input: { connected: true }) {
        webPixel {
          id
          connected
        }
        userErrors {
          field
          message
        }
      }
    }
  `;

  const response = await client.query({
    data: {
      query: mutation,
      variables: { webPixelId: "YOUR_PIXEL_ID" },
    },
  });

  console.log("WebPixel Connection Response:", response);
}

- Call function when the app installs.

[PeaceOut]

Thanks so much for taking the time to answer. What do you call the setup part of remix? What file is that?

Sorry, I'm new to Remix. 

I can't find one example online of this webPixelCreate that works.

Thanks in advance