{"id":19627762,"url":"https://github.com/lauraluiz/commercetools-graphql-react","last_synced_at":"2025-04-28T06:30:56.129Z","repository":{"id":39348990,"uuid":"215965564","full_name":"lauraluiz/commercetools-graphql-react","owner":"lauraluiz","description":"Example code of a React application connecting to commercetools' GraphQL API","archived":false,"fork":false,"pushed_at":"2024-06-21T19:16:22.000Z","size":7250,"stargazers_count":6,"open_issues_count":20,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-06-22T11:26:30.746Z","etag":null,"topics":["commercetools","graphql","react","reactjs"],"latest_commit_sha":null,"homepage":"https://commercetools-graphql-react.netlify.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lauraluiz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-10-18T07:25:58.000Z","updated_at":"2024-06-22T11:26:30.746Z","dependencies_parsed_at":"2024-06-12T23:43:43.857Z","dependency_job_id":"96f0aba4-4d53-4ba0-9510-d7b560e1e88d","html_url":"https://github.com/lauraluiz/commercetools-graphql-react","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/lauraluiz%2Fcommercetools-graphql-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lauraluiz%2Fcommercetools-graphql-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lauraluiz%2Fcommercetools-graphql-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lauraluiz%2Fcommercetools-graphql-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lauraluiz","download_url":"https://codeload.github.com/lauraluiz/commercetools-graphql-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224099715,"owners_count":17255577,"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":["commercetools","graphql","react","reactjs"],"created_at":"2024-11-11T11:52:52.315Z","updated_at":"2024-11-11T11:52:53.304Z","avatar_url":"https://github.com/lauraluiz.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# commercetools GraphQL React\n\n[![Netlify Status](https://api.netlify.com/api/v1/badges/8a8d57c4-3429-47cb-b6f0-de30a98f15b8/deploy-status)](https://app.netlify.com/sites/commercetools-graphql-react/deploys)\n\n## Demo\nhttps://commercetools-graphql-react.netlify.com/\n\n## Requirements\n- [Yarn](https://yarnpkg.com/en/) installed\n\n## Commands\n\nProject setup\n```\nyarn install\n```\n\nCompiles and hot-reloads for development\n```\nyarn start\n```\n\nCompiles and minifies for production\n```\nyarn build\n```\n\n## How to re-create this project\n\nThis is the setup that was used to create and connect this project to commercetools GraphQL API.\n\n### Steps\nCreate project with [npx](https://www.npmjs.com/package/npx)\n```\nnpx create-react-app commercetools-graphql-react\n```\n\nAdd apollo as dependency\n```\ncd commercetools-graphql-react\nnpm install @apollo/react-hooks apollo-client apollo-link-context apollo-link-http apollo-cache-inmemory graphql graphql-tag\n```\n\nInstall commercetools Auth SDK\n```\nyarn add @commercetools/sdk-auth\n```\n\nCreate `src/apollo.js` with this code\n```javascript\nimport ApolloClient from 'apollo-client';\nimport { createHttpLink } from 'apollo-link-http';\nimport { setContext } from 'apollo-link-context';\nimport { InMemoryCache } from 'apollo-cache-inmemory';\nimport SdkAuth, { TokenProvider } from '@commercetools/sdk-auth';\n\n// Create token provider for the commercetools project\nconst tokenProvider = new TokenProvider({\n  sdkAuth: new SdkAuth({\n    host: 'https://auth.sphere.io',\n    projectKey: 'graphql-webinar',\n    credentials: {\n      clientId: 'EepIOtr0P2evGfeWCAh48qIs',\n      clientSecret: 'nCmLN6J5bCSx0ZoicI5GpoyibjnUDnHk',\n    },\n    scopes: ['manage_my_orders:graphql-webinar', 'view_products:graphql-webinar'],\n  }),\n  fetchTokenInfo: sdkAuth =\u003e sdkAuth.anonymousFlow(),\n});\n\nconst httpLink = createHttpLink({\n  uri: 'https://api.sphere.io/graphql-webinar/graphql',\n});\n\nconst authLink = setContext((_, { headers = {} }) =\u003e tokenProvider.getTokenInfo()\n  .then(tokenInfo =\u003e `${tokenInfo.token_type} ${tokenInfo.access_token}`)\n  .then(authorization =\u003e ({ headers: { ...headers, authorization } })));\n\nexport default new ApolloClient({\n  link: authLink.concat(httpLink),\n  cache: new InMemoryCache()\n});\n```\n\nReplace `src/App.js` content with this code\n```javascript\nimport React from 'react';\nimport { ApolloProvider } from '@apollo/react-hooks';\nimport apolloClient from './apollo';\nimport './App.css';\n\nfunction App() {\n  return (\n    \u003cApolloProvider client={apolloClient}\u003e\n      \u003cdiv\u003eYour code\u003c/div\u003e\n    \u003c/ApolloProvider\u003e\n  );\n}\n\nexport default App;\n```\n\n\nNow you can create GraphQL queries and mutations to commercetools in any React component.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flauraluiz%2Fcommercetools-graphql-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flauraluiz%2Fcommercetools-graphql-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flauraluiz%2Fcommercetools-graphql-react/lists"}