Nuxt Apollo Shopify Graphql

huangapple
go评论117阅读模式
英文:

Nuxt Apollo Shopify Graphql

问题

Here's the translated content:

我正在使用 https://github.com/nuxt-community/apollo-module
我尝试设置它以连接到我的 Shopify GraphQL API

在 nuxt.config.js 中:

  1.   apollo: {
  2.     clientConfigs: {
  3.       default: {
  4.         httpEndpoint: 'https://my-store.myshopify.com/admin/api/2020-01/graphql.json',
  5.         getAuth: () => 'Bearer 26cfd63bbba75243b55fad2c8de0a12f'
  6.       },
  7.     }
  8.   },

在 index.vue 中，我有以下内容:

  1. <script>
  2.   import gql from 'graphql-tag'
  3.   
  4.   export default {
  5.     apollo: {
  6.       data: {
  7.         query: gql`
  8.           query {
  9.             shop {
  10.               name
  11.             }
  12.           `,
  13.         }
  14.       }
  15.     }
  16.   }
  17. </script>

任何帮助将不胜感激。

谢谢

英文:

So I am using the https://github.com/nuxt-community/apollo-module
I am trying to set this up to connect to my shopify graphql API

On nuxt.config.js:

  1.   apollo: {
  2.     clientConfigs: {
  3.       default: {
  4.         httpEndpoint: &#39;https://my-store.myshopify.com/admin/api/2020-01/graphql.json&#39;,
  5.         getAuth: () =&gt; &#39;Bearer 26cfd63bbba75243b55fad2c8de0a12f&#39;
  6.       },
  7.     }
  8.   },

on index.vue, i have the following:

  1.   &lt;script&gt;
  2.     import gql from &#39;graphql-tag&#39;
  3.     
  4.     export default {
  5.       apollo: {
  6.         data: {
  7.           query: gql`
  8.             query {
  9.               shop {
  10.                 name
  11.               }
  12.             }
  13.           `,
  14.         }
  15.       }
  16.     }
  17.   &lt;/script&gt;

Any help would be much appreciated.

Thanks

答案1

得分: 2

这是我们在Nuxt配置中的工作方式。

  1.     apollo: {
  2.         clientConfigs: {
  3.             default: {
  4.                 httpEndpoint:
  5.                     "http://api.another-backend-example.com/graphql",
  6.                 persisting: false
  7.             },
  8.             shopify: {
  9.                 httpEndpoint:
  10.                     "https://my-store.myshopify.com/api/2019-07/graphql.json",
  11.                 httpLinkOptions: {
  12.                     headers: {
  13.                         "Content-Type": "application/json",
  14.                         "X-Shopify-Storefront-Access-Token":
  15.                             "123456789abcdefghi"
  16.                     }
  17.                 },
  18.                 persisting: false
  19.             }
  20.         }
  21.     }

我们还为Nuxt构建了许多有用的Shopify组件，也许这对你有帮助: https://github.com/funkhaus/shophaus/

英文:

This is how we have it working in our Nuxt Config.

  1.     apollo: {
  2.         clientConfigs: {
  3.             default: {
  4.                 httpEndpoint:
  5.                     &quot;http://api.another-backend-example.com/graphql&quot;,
  6.                 persisting: false
  7.             },
  8.             shopify: {
  9.                 httpEndpoint:
  10.                     &quot;https://my-store.myshopify.com/api/2019-07/graphql.json&quot;,
  11.                 httpLinkOptions: {
  12.                     headers: {
  13.                         &quot;Content-Type&quot;: &quot;application/json&quot;,
  14.                         &quot;X-Shopify-Storefront-Access-Token&quot;:
  15.                             &quot;123456789abcdefghi&quot;
  16.                     }
  17.                 },
  18.                 persisting: false
  19.             }
  20.         }
  21.     }

We also built a lot of useful Shopify components for Nuxt, maybe this helps you: https://github.com/funkhaus/shophaus/

huangapple
  • 本文由 发表于 2020年1月4日 00:37:02
  • 转载请务必保留本文链接：https://go.coder-hub.com/59582129.html
  • api
  • apollo
  • graphql
  • nuxt.js
  • shopify
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定