Tengo problemas para realizar solicitudes a la API de administración de GraphQL de Shopify desde mi aplicación Vue con la siguiente configuración:

src/lib/apolloClient.js

 import { ApolloClient, createHttpLink, InMemoryCache } from "@apollo/client"; const httpLink = createHttpLink({ uri: "https://{shop}.myshopify.com/admin/api/2021-07/graphql.json", }); const cache = new InMemoryCache(); const apolloClient = new ApolloClient({ link: httpLink, headers: { "X-Shopify-Access-Token": "{password}", }, cache, }); export default apolloClient;

src/principal.js

 import { createApp, provide, h } from "vue"; import "tailwindcss/tailwind.css" import App from "./App.vue"; import apolloClient from "./lib/apolloClient"; createApp({ setup() { provide(DefaultApolloClient, apolloClient); }, render: () => h(App), }).mount("#app");

He estado recibiendo un error de verificación previa de CORS

 No 'Access-Control-Allow-Origin' header is present on the requested resource

Y al agregar

 fetchOptions: { mode: 'no-cors' }

a mi inicialización de ApolloClient me sale el siguiente error:

 unexpected end of JSON

No estoy muy seguro de si mi configuración no es la ideal o si solo me faltan algunas configuraciones.

Soy muy nuevo en Shopify Dev, pero me gustaría incorporar alguna funcionalidad extendida en mis páginas de listado de productos con JavaScript. Si alguien tiene algo de experiencia con esto, agradecería algunos consejos sobre cómo debería diseñar esto, no me opongo en absoluto a adoptar un enfoque completamente diferente.