Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gil--/gatsby-plugin-apollo-client
📡Inject a Shopify Apollo Client into the browser.
https://github.com/gil--/gatsby-plugin-apollo-client
apollo gatsby gatsby-plugin gatsbyjs shopify shopify-storefronts
Last synced: 3 months ago
JSON representation
📡Inject a Shopify Apollo Client into the browser.
- Host: GitHub
- URL: https://github.com/gil--/gatsby-plugin-apollo-client
- Owner: gil--
- License: mit
- Created: 2018-08-23T02:24:46.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2022-02-11T05:14:20.000Z (almost 3 years ago)
- Last Synced: 2024-05-01T14:32:14.580Z (8 months ago)
- Topics: apollo, gatsby, gatsby-plugin, gatsbyjs, shopify, shopify-storefronts
- Language: JavaScript
- Homepage: https://www.npmjs.com/package/gatsby-plugin-apollo-shopify
- Size: 92.8 KB
- Stars: 21
- Watchers: 3
- Forks: 4
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# gatsby-plugin-apollo-shopify
## Install
`npm install --save gatsby-plugin-apollo-shopify`
## How to use
```js
// In your gatsby-config.js
plugins: [
{
resolve: `gatsby-plugin-apollo-shopify`,
options: {
shopName: `gatsbyjs`,
accessToken: `48bbac10dae7225fe4e36a545d1b9b2f`,
// Optionally set the API version you want to use. For a list of available API versions,
// see: https://shopify.dev/concepts/about-apis/versioning/release-notes
// Defaults to unspecified/oldest stable
apiVersion: "2020-07",
},
},
]
```
## How to Query within Gatsby
To utilize the Apollo client within your Gatsby project, import `graphql-tag` and `react-apollo`. for example:
```js
import gql from "graphql-tag"
import { Query } from "react-apollo"
const GET_PRODUCT = gql`
query($handle: String!) {
shop {
products(first:1, query: $handle) {
edges {
node {
variants(first: 1) {
edges {
node {
availableForSale
}
}
}
}
}
}
}
}
`
export default ({ children, data }) => {
const product = data.shopifyProduct
return (
{({ loading, error, data }) => {
if (loading) return
Loading stock status...
if (error) return There was an error!
return (
<>
Stock Status: {data && data.shop.products && data.shop.products.edges[0].node.variants && data.shop.products.edges[0].node.variants.edges[0].node.availableForSale.toString()}
>
)
}}
)
}
export const query = graphql`
query productQuery($id: String!) {
shopifyProduct(id: { eq: $id }) {
handle
}
}
`
```
## Credits
Most of this plugin was taken from the [gatsby-plugin-apollo-client](https://github.com/gatsbyjs/gatsby/tree/master/examples/using-multiple-providers/plugins/gatsby-plugin-apollo-client) within the using-multiple-providers example site.