Admin Graphql fetch from Checkout UI Extension

[dgtlmonk]

Hi, 

From Checkout UI Extension, i'm trying to access and run a minimal test graphql query like so:

  fetch(`${storeUrl}/admin/api/2023-07/graphql.json`, {
              method: "POST",
              credentials: "include",
              headers: {
                ContentType: "application/json",
                Authorization: `Bearer ${token}`,
                "X-Shopify-Access-Token": process.env.SHOPIFY_API_KEY,            
              },
              body: JSON.stringify({
                query: `query {
                          shop {
                            name
                          }
                       }`,
              }),

But i keep getting error

{"errors":{"query":"Required parameter missing or invalid"}}

I tried different approach, even removing the credentials - but still getting the same error. My question is, is this even possible?

[lizk]

Hello 👋

Could you clarify what you were hoping to accomplish with the API call to the Admin API? Are you trying to query or mutate information? 

If you are just looking to get product information, or read data I would recommend using the Storefront API.  Using the Admin API directly in the Checkout UI extension would reveal your access token.

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>
  );
}

[dgtlmonk]

Hi Lizk

Thanks for the reply and example. I'm trying to do several stuff that needs Admin API.  One of them is to mutate a Metafield that belongs to the Customer (since I can get the Customer Id during checkout)

[lizk]

Could you share all the use cases you are looking to use the Admin API for?

[dgtlmonk]

Hi Lizk, 

We resorted to different approach instead. Thanks for the help 🙂

[bootsgridDev]

can you pls explain how to get Details from AdminApi in checkout ui extension

[manishgowardipe]

could you explain the different approach here ? it might help us  since we are also trying to make update on customer metafields..
Thanks in advance

[sowndharya]

Hi Lizk,

If i am using Storefront API just to query the product information like you mentioned above. What is the method for authentication?. Not sure about the authentications for the Checkout ui extensions apps

[munzahshah]

Hi @dgtlmonk 

Please let me know what other approach you took to figure this out?

I need to get the same thing done i.e., need to run a graqhQL query within the UI extension in order to get customer ID, but I am unable to run it from inside the extension.

FYI, I am trying to get customer ID of the customer who is interacting with the cart on store, so that I can fetch the tags on that customer using the ID, and then run a mutation to create a metafield and store the obtained customer tags in that metafield. I am doing this so that I can further use that metafield as a variable in one of my other gql queries which acts as in input for my function to hide Payment Methods on the checkout page.

At the moment, I am able to get the customer tags from admin API from outside of my extension, however, I am unable to figure out a way to fetch the exact customer which is interacting with the cart at the moment. For this I need to run query inside of extension. I am however open to other suggestions for implementing this.

Any help in this regard is much appreciated!

Thanks In Advance 🙂