I'm struggling to make requests to Shopify's GraphQL Admin API from my Vue app with the following setup:

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/main.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");

I've been getting a CORS preflight error

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

And when adding

fetchOptions: {
  mode: 'no-cors'
}

to my ApolloClient initialisation I get the following error:

unexpected end of JSON

I'm not too sure if my setup is completely not ideal or if I'm just missing a few configs.

I'm very new to Shopify Dev, but I'd like to build some extended functionality into my product listing pages with JavaScript. If anyone has got some experience with this, I'd appreciate some advice on how I should be architecting this, I'm not at all opposed to taking a completely different approach.