How to query metafields via GraphQL

Introduction

This guide will help you fetch your collection or product metafield data using GraphQL instead of filters.

Query

You need to first write a query to fetch the metafield data. Below is an example query to fetch the metafield data.

query GetProductDetails($handle: String) {
  collection(handle: $handle) {
    custom_field_1: metafield(key: "field_key_1", namespace: "field_namespace_1") {
      __typename
      value
    }

    custom_field_1: metafield(key: "field_key_2", namespace: "field_namespace_2") {
      __typename
      value
    }
  }
}

Let's break down the query:

• collection(handle: $handle): This is the collection query. You can replace collection with product if you want to fetch product metafield data.
• custom_field_1: metafield(key: "field_key_1", namespace: "field_namespace_1"): This is the metafield query. You can replace custom_field_1 with any name you want. This name would be used as a key for this metafield in the query response. field_key_1 is the key of the metafield and field_namespace_1 is the namespace of the metafield.

Usage

You can use the above query to fetch the metafield data. Below is an example of how you can use the query to fetch the metafield data.

const query = `#graphql
query GetProductDetails($handle: String) {
  collection(handle: $handle) {
    custom_field_1: metafield(key: "field_key_1", namespace: "field_namespace_1") {
      __typename
      value
    }

    custom_field_1: metafield(key: "field_key_2", namespace: "field_namespace_2") {
      __typename
      value
    }
  }
}
`

const productList = {
  title: 'Product list',
  attributes: {
    insideSafeAreaView: true,
    headerShown: true,
  },
  blocks: [
    {
      name: 'shopify/page-meta-graphql-query',
      attributes: {
        pageStateName: 'collection-meta',
        query: query,
        variables: {
          handle: '{{blockData.collection.handle}}',
        },
      },
    },
    {
      attributes: {},
      name: 'appmaker/shopify-product-list',
      innerBlocks: [],
      clientId: 'product-list',
      isValid: true,
    },
  ]
}

export default productList;

The above code will fetch the metafield data and make it available throughout the page for all blocks within it. You can add the query and the shopify/page-meta-graphql-query block to any page where you want to fetch the metafield data.

Note: collection-meta is the name of the metadata state where the metafield data will be stored.

Accessing the metafield data

You can now access the metafield data in your blocks using the usePageMetaDataState method. Below is an example of how you can access the metafield data in your blocks.

import React from 'react';

import { ThemeText, Layout } from "@appmaker-xyz/ui";
import { usePageMetaDataState } from "@appmaker-xyz/core";


const ProductList = () => {
  const { data } = usePageMetaDataState("collection-meta");

  const metafield1 = data?.collection?.custom_field_1?.value;
  const metafield2 = data?.collection?.custom_field_2?.value; 

  return (
    <Layout>
      <ThemeText>{metafield1}</ThemeText>
      <ThemeText>{metafield2}</ThemeText>
    </Layout>
  );
};

Make sure to parse the result of the value in the metafield if you're expect objects or arrays.