Nuxt Apollo Shopify Graphql

Question

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:

  apollo: {
    clientConfigs: {
      default: {
        httpEndpoint: 'https://my-store.myshopify.com/admin/api/2020-01/graphql.json',
        getAuth: () => 'Bearer 26cfd63bbba75243b55fad2c8de0a12f'
      },
    }
  },

on index.vue, i have the following:

  <script>
    import gql from 'graphql-tag'

    export default {
      apollo: {
        data: {
          query: gql`
            query {
              shop {
                name
              }
            }
          `,
        }
      }
    }
  </script>

• is this the correct set up?
• I appear to be getting a cors policy error. I believe this is to do with missing headers that Shopify requires: https://help.shopify.com/en/api/graphql-admin-api/getting-started#authentication
  • how do I add 'X-Shopify-Access-Token' to the setup?

Any help would be much appreciated.

Thanks

Answer 1

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

    apollo: {
        clientConfigs: {
            default: {
                httpEndpoint:
                    "http://api.another-backend-example.com/graphql",
                persisting: false
            },
            shopify: {
                httpEndpoint:
                    "https://my-store.myshopify.com/api/2019-07/graphql.json",
                httpLinkOptions: {
                    headers: {
                        "Content-Type": "application/json",
                        "X-Shopify-Storefront-Access-Token":
                            "123456789abcdefghi"
                    }
                },
                persisting: false
            }
        }
    }

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