ZaneRay Nuxt Apollo Shopify Storefront

What is this repository for?

Nuxt Layer is built to integrate Shopify's GraphQL Storefront API into a Nuxt 3 project. Layer includes an Apollo client to connect to the Shopify GraphQL Storefront API GraphQL Storefront API.

How do I get set up?

Core Dependencies

• GraphQL
• Nuxt Apollo
• GraphQL Codegen

Central Layer Configs

The central Nuxt repo will require the following Nuxt envs:

  NUXT_ENV_SHOPIFY_STOREFRONT_ACCESS_TOKEN= 
  NUXT_ENV_SHOPIFY_STORE_DOMAIN= 
  NUXT_ENV_SHOPIFY_GRAPHQL_URL= 

Storefront access tokens can be generated using the Shopify Headless app. The generated Public token should be used.

Central Repo Layer Setup

Add the Apollo option to the Nuxt 3 config:

  apollo: {
    clients: {
      shopifyStorefront: './layers/nuxt-apollo-shopify-storefront/apollo/client.ts'
    }
  }

One can import the Shopify Storefront types from the type folder:

  import { Product } from './layers/nuxt-apollo-shopify-storefront/types/shopify.d.ts'

GraphQL Calls

One can import a query or mutation from the apollo folder:

  import { productByHandle } from './layers/nuxt-apollo-shopify-storefront/queries/productByHandle.gql'

Common Objects

• Queries
  • productByHandle
  • collectionByHandle
  • shop

Cart

• Queries
  • cart
• Mutations
  • cartAttributesUpdate
  • cartCreate
  • cartLineItemsAdd
  • cartLineItemsRemove
  • cartLineItemsUpdate

Customer

• Queries
  • customer
  • customerOrders
    • customer
    • order
  • customerAddresses
    • customer
    • mailingAddress
• Mutations
  • customerAccessTokenCreate
  • customerAccessTokenDelete
  • customerAccessTokenRenew
  • customerActivate
  • customerAddressCreate
  • customerAddressDelete
  • customerAddressUpdate
  • customerDefaultAddressUpdate
  • customerRecover
  • CustomerReset
  • customerResetByUrl
  • customerUpdate

Customer

• Queries
  • products

More Coming Soon e.c. - blog (?), pages (?), etc (?)

Who do I talk to?

Your teammates at ZaneRay.