如何使用 Vue 和 Apollo 向 Shopify 的 GraphQL Admin API 发出请求答案

【问题标题】：How to make requests to Shopify's GraphQL Admin API with Vue & Apollo如何使用 Vue 和 Apollo 向 Shopify 的 GraphQL Admin API 发出请求
【发布时间】：2021-11-05 22:55:58
【问题描述】：

我正在努力通过以下设置从我的 Vue 应用程序向 Shopify 的 GraphQL Admin API 发出请求：

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

我遇到了 CORS 预检错误

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

以及添加时

fetchOptions: {
  mode: 'no-cors'
}

对于我的 ApolloClient 初始化，我收到以下错误：

unexpected end of JSON

我不太确定我的设置是否完全不理想，或者我只是缺少一些配置。

我是 Shopify Dev 的新手，但我想使用 JavaScript 在我的产品列表页面中构建一些扩展功能。如果有人对此有一些经验，我会很感激一些关于我应该如何构建它的建议，我一点也不反对采取完全不同的方法。

【问题讨论】：

标签： javascript vue.js graphql shopify shopify-api

【解决方案1】：

这是设计使然，出于安全原因，您不应该在前端使用 Admin API，主要是因为您需要在前端包中嵌入身份验证密钥，这就是总是容易造成灾难性的后果。

您需要将这些请求路由到您自己的后端应用程序，该应用程序将使用 API 并通过 App Proxies 将其代理到您的前端

另见：

Create product with Shopify Admin API

Can we get product by SKU using Shopify Storefront GraphQL API(NOT ADMIN)?

is that possible to use admin APIs in frontend directly in the store without app

【讨论】：