Accessing Metaobjects in Checkout UI Extension

[JReichenstein]

I’m trying to access a custom metaobject I created inside of the Checkout UI extension. I have not had any luck trying to access it through the API using useAppMetafields or useMetafields but I’m not sure if I’m clear from what I’ve read if Metaobjects I’ve created are technically able to be used inside a checkout UI extension?

[Luke]

Have you tried accessing them with the Storefront API?

Storefront API

[JReichenstein]

I have tried but haven’t had any luck yet!

When I look at the example code in the Storefront API, is there something I would replace product with when using a custom metaobject definition?

import {useEffect, useState} from 'react';
import {
  useApi,
  reactExtension,
  List,
  ListItem,
} from '@shopify/ui-extensions-react/checkout';

export default reactExtension(
  'purchase.checkout.block.render',
  () => <Extension />,
);

function Extension() {
  const [data, setData] = useState();
  const {query} = useApi();

  useEffect(() => {
    query(
      `query ($first: Int!) {
        products(first: $first) {
          nodes {
            id
            title
          }
        }
      }`,
      {
        variables: {first: 5},
      },
    )
      .then(({data, errors}) => setData(data))
      .catch(console.error);
  }, [query]);

  return (
    <List>
      {data?.products?.nodes.map((node) => (
        <ListItem key={node.id}>
          {node.title}
        </ListItem>
      ))}
    </List>
  );
}

[Luke]

Take a look at the rest of the Storefront API docs

metaobject - Storefront API

[JReichenstein]

Thanks Luke! This is what I’m currently using but it’s still not returning anything. Posted my current code, custom metaobject definitions, and empty array I’m getting

const response = await query(
          `#graphql
            query GetRoundUpSettings {
              metaobjects(type: "free_shipping_threshold", first: 1) {
                nodes {
                  fields {
                    key
                    value
                  }
                }
              }
            }
          `
        );

        console.log("response", response);