How to create a Metafield when app is installed to a store?

GraphQL Admin API Troubleshooting
1

This is probably pretty simple to do, but I am failing to understand where/what file I need to make a request in to create a Metafield.

I added the following code (afterAuth hook) in the shopify.server.ts file hoping that it would run when the app is installed, but the Metafield does not get created. I have a button on the index with this same request and it does create the Metafield when I click the button, but I need it to be created on app install.

import "@shopify/shopify-app-remix/adapters/node";
import {
  ApiVersion,
  AppDistribution,
  shopifyApp,
} from "@shopify/shopify-app-remix/server";
import { PrismaSessionStorage } from "@shopify/shopify-app-session-storage-prisma";
import { restResources } from "@shopify/shopify-api/rest/admin/2024-04";
import prisma from "./db.server";
import type { AdminApiContext } from "node_modules/@shopify/shopify-app-remix/dist/ts/server/clients";
import type { ShopifyRestResources } from "@shopify/shopify-api";

const shopify = shopifyApp({
  apiKey: process.env.SHOPIFY_API_KEY,
  apiSecretKey: process.env.SHOPIFY_API_SECRET || "",
  apiVersion: ApiVersion.October24,
  scopes: process.env.SCOPES?.split(","),
  appUrl: process.env.SHOPIFY_APP_URL || "",
  authPathPrefix: "/auth",
  sessionStorage: new PrismaSessionStorage(prisma),
  distribution: AppDistribution.AppStore,
  restResources,
  hooks: {
    afterAuth: async ({ admin, session }) => {
      await shopify.registerWebhooks({ session });

      try {
        const metafield = await getMetafield(admin);

        if (metafield == null) {
          await createMetafield(admin);
        }
      } catch (error: any) {
        if ("graphQLErrors" in error) {
          console.error(error.graphQLErrors);
        } else {
          console.error(error);
        }

        throw error;
      }
    },
  },
  future: {
    unstable_newEmbeddedAuthStrategy: true,
  },
  ...(process.env.SHOP_CUSTOM_DOMAIN
    ? { customShopDomains: [process.env.SHOP_CUSTOM_DOMAIN] }
    : {}),
});

export default shopify;
export const apiVersion = ApiVersion.October24;
export const addDocumentResponseHeaders = shopify.addDocumentResponseHeaders;
export const authenticate = shopify.authenticate;
export const unauthenticated = shopify.unauthenticated;
export const login = shopify.login;
export const registerWebhooks = shopify.registerWebhooks;
export const sessionStorage = shopify.sessionStorage;

async function getMetafield(admin: AdminApiContext<ShopifyRestResources>) {
  const response = await admin.graphql(getMetafieldQuery, {
    variables: {
      key: "badge_style",
      namespace: "custom_badges",
      ownerType: "PRODUCT",
    },
  });

  const json = await response.json();
  return json.data?.metafieldDefinitions.nodes[0];
}

const getMetafieldQuery = `#graphql
query getMetafieldDefinition($key: String!, $namespace: String!, $ownerType: MetafieldOwnerType!) {
  metafieldDefinitions(first: 1, key: $key, namespace: $namespace, ownerType: $ownerType) {
    nodes {
      id
    }
  }
}
`;

async function createMetafield(admin: AdminApiContext<ShopifyRestResources>) {
  const response = await admin.graphql(
    `#graphql
      mutation CreateMetafieldDefinition {
      metafieldDefinitionCreate(definition: {
        name: "Badge Style",
        namespace: "custom_badges",
        key: "badge_style",
        type: "json",
        ownerType: PRODUCT
      }) {
        createdDefinition {
          id
          name
        }
        userErrors {
          field
          message
        }
      }
    }`
  );

  const json = await response.json();
  console.log(JSON.stringify(json, null, 2));
}
2

Are you seeing errors when you install the app? You might be able to see more error message if you verify if the API call returned any issues, eg:

const json = await response.json();
if (json.data?.metafieldDefinitionCreate?.userErrors?.length) {
  console.error("GraphQL Errors:", json.data.metafieldDefinitionCreate.userErrors);
}