How to access data from backend App in Extension?

Extensions
1

I am developing a Shopify app with all last versions of Shopify CLI / Remix …
My app is creating a kind of “token” I need to use in my extension, I have stored this value in my Prisma database, and after reading a ton of topics, I can’t figure out how to access this value in my extension.
Some topics say to create a route and use app proxy to expose this data and get it from fetch in my extension, but where should I create this route ? In my backend app ? How to configure my app proxy then ?

Or some topics talk about metaFields, I tried to create a metaField in my app backend :

const response = await admin.graphql(
    `#graphql
  mutation CreateMetafieldDefinition($definition: MetafieldDefinitionInput!) {
    metafieldDefinitionCreate(definition: $definition) {
      createdDefinition {
        id
        name
      }
      userErrors {
        field
        message
        code
      }
    }
  }`,
    {
      variables: {
        definition: {
          name: "Scripts ID",
          namespace: "$app:data",
          key: "token",
          description: "Script ids of the current user.",
          type: "single_line_text_field",
          ownerType: "SHOP",
          access: {
            admin: "MERCHANT_READ",
            storefront: "PUBLIC_READ",
          },
        },
      },
    },
  );

It works, but then, how to access this in my app extension ? I tried :

{{ shop.metafields.app--1661179XXXXX--data.token.value }}

But nothing is showed, I read I need to use $app for the namespace to expose it in StoreFront, but how to get it in my extension then ? Is it possible ?

Thanks, I can’t find any answer.

2

Well, I believe you would want an app-data metafield and call it within the Liquid of your theme app extension.

This section refers to using app-data metafield for conditionally displaying an app block.

I am assuming, as I have not tested, that you would simply call it similarly within the Liquid code rather than just the schema.

1 Like
3

Oh I missed it in the documentation, I was reading the GraphQL doc, they never talk about these app metafields.
It works ! Thanks.

Here is my code using Remix to create this app metafield:

import { authenticate } from "../shopify.server";

export default async function createAppMetafieldScriptIds(
  request,
  scriptIds: string,
) {
  const { admin } = await authenticate.admin(request);
  const responseCurrentApp = await admin.graphql(
    `#graphql
    query {
      currentAppInstallation {
        id
      }
    }`,
  );
  const dataCurrentApp = await responseCurrentApp.json();
  const ownerId = dataCurrentApp.data.currentAppInstallation.id;
  const response = await admin.graphql(
    `#graphql
    mutation CreateAppDataMetafield($metafieldsSetInput: [MetafieldsSetInput!]!) {
      metafieldsSet(metafields: $metafieldsSetInput) {
        metafields {
          id
          namespace
          key
        }
        userErrors {
          field
          message
        }
      }
    }`,
    {
      variables: {
        metafieldsSetInput: {
          namespace: "extension",
          value: scriptIds,
          key: "script_ids",
          type: "single_line_text_field",
          ownerId: ownerId,
        },
      },
    },
  );

  const data = await response.json();
}

And then, you can access it in your liquid files in your extension:

{{ app.metafields.extension.script_ids }}

2 Likes