{"id":15538913,"url":"https://github.com/gil--/gatsby-plugin-apollo-client","last_synced_at":"2025-04-23T15:43:19.609Z","repository":{"id":32909560,"uuid":"145788761","full_name":"gil--/gatsby-plugin-apollo-client","owner":"gil--","description":"📡Inject a Shopify Apollo Client into the browser.","archived":false,"fork":false,"pushed_at":"2022-02-11T05:14:20.000Z","size":95,"stargazers_count":22,"open_issues_count":5,"forks_count":4,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-19T19:07:17.998Z","etag":null,"topics":["apollo","gatsby","gatsby-plugin","gatsbyjs","shopify","shopify-storefronts"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/gatsby-plugin-apollo-shopify","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gil--.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-08-23T02:24:46.000Z","updated_at":"2025-02-24T01:10:51.000Z","dependencies_parsed_at":"2022-08-07T18:16:10.952Z","dependency_job_id":null,"html_url":"https://github.com/gil--/gatsby-plugin-apollo-client","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gil--%2Fgatsby-plugin-apollo-client","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gil--%2Fgatsby-plugin-apollo-client/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gil--%2Fgatsby-plugin-apollo-client/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gil--%2Fgatsby-plugin-apollo-client/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gil--","download_url":"https://codeload.github.com/gil--/gatsby-plugin-apollo-client/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250462741,"owners_count":21434656,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["apollo","gatsby","gatsby-plugin","gatsbyjs","shopify","shopify-storefronts"],"created_at":"2024-10-02T12:07:51.410Z","updated_at":"2025-04-23T15:43:19.588Z","avatar_url":"https://github.com/gil--.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# gatsby-plugin-apollo-shopify\n\n## Install\n\n`npm install --save gatsby-plugin-apollo-shopify`\n\n## How to use\n\n```js\n// In your gatsby-config.js\nplugins: [\n  {\n    resolve: `gatsby-plugin-apollo-shopify`,\n    options: {\n      shopName: `gatsbyjs`,\n      accessToken: `48bbac10dae7225fe4e36a545d1b9b2f`,\n      // Optionally set the API version you want to use. For a list of available API versions,\n      // see: https://shopify.dev/concepts/about-apis/versioning/release-notes\n      // Defaults to unspecified/oldest stable\n      apiVersion: \"2020-07\",\n    },\n  },\n]\n```\n\n## How to Query within Gatsby\n\nTo utilize the Apollo client within your Gatsby project, import `graphql-tag` and `react-apollo`. for example:\n\n```js\n\nimport gql from \"graphql-tag\"\nimport { Query } from \"react-apollo\"\n\nconst GET_PRODUCT = gql`\n  query($handle: String!) {\n    shop {\n      products(first:1, query: $handle) {\n        edges {\n          node {\n            variants(first: 1) {\n              edges {\n                node {\n                  availableForSale\n                }\n              }\n            }\n          }\n        }\n      }\n    }\n  }\n`\n\nexport default ({ children, data }) =\u003e {\n    const product = data.shopifyProduct\n\n    return (\n        \u003cQuery query={GET_PRODUCT} variables={{ handle: product.handle }}\u003e\n            {({ loading, error, data }) =\u003e {\n                if (loading) return \u003cdiv\u003eLoading stock status...\u003c/div\u003e\n                if (error) return \u003cdiv\u003eThere was an error!\u003c/div\u003e\n\n                return (\n                \u003c\u003e\n                    \u003ch3\u003eStock Status: {data \u0026\u0026 data.shop.products \u0026\u0026 data.shop.products.edges[0].node.variants \u0026\u0026 data.shop.products.edges[0].node.variants.edges[0].node.availableForSale.toString()}\u003c/h3\u003e\n                \u003c/\u003e\n                )\n            }}\n        \u003c/Query\u003e\n    )\n}\n\nexport const query = graphql`\n    query productQuery($id: String!) {\n        shopifyProduct(id: { eq: $id }) {\n            handle\n        }\n    }\n`\n\n```\n\n## Credits\n\nMost 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.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgil--%2Fgatsby-plugin-apollo-client","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgil--%2Fgatsby-plugin-apollo-client","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgil--%2Fgatsby-plugin-apollo-client/lists"}