{"id":16958867,"url":"https://github.com/ebazhanov/react-graphql-example","last_synced_at":"2025-04-11T22:08:21.709Z","repository":{"id":103093660,"uuid":"432668892","full_name":"Ebazhanov/react-graphql-example","owner":"Ebazhanov","description":"An example of usage GraphQL and React","archived":false,"fork":false,"pushed_at":"2022-09-25T10:07:09.000Z","size":1175,"stargazers_count":8,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-11T22:08:20.804Z","etag":null,"topics":["example","graphql","react","typescript"],"latest_commit_sha":null,"homepage":"https://graphql-react-example.netlify.app/","language":"TypeScript","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/Ebazhanov.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,"zenodo":null}},"created_at":"2021-11-28T09:25:34.000Z","updated_at":"2025-01-14T05:28:47.000Z","dependencies_parsed_at":"2023-04-12T10:21:12.176Z","dependency_job_id":null,"html_url":"https://github.com/Ebazhanov/react-graphql-example","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/Ebazhanov%2Freact-graphql-example","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ebazhanov%2Freact-graphql-example/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ebazhanov%2Freact-graphql-example/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ebazhanov%2Freact-graphql-example/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Ebazhanov","download_url":"https://codeload.github.com/Ebazhanov/react-graphql-example/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248487713,"owners_count":21112191,"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":["example","graphql","react","typescript"],"created_at":"2024-10-13T22:43:47.103Z","updated_at":"2025-04-11T22:08:21.690Z","avatar_url":"https://github.com/Ebazhanov.png","language":"TypeScript","readme":"Graphql + React [simple example](https://graphql-react-example.netlify.app/)\n----\n\nMake query `GetExchangeRates` here https://48p1r2roz4.sse.codesandbox.io\n```\nquery GetExchangeRates {\n    rates(currency: \"USD\") {\n      currency\n      rate\n    }\n  }\n```  \n\n![gif](gif.gif)\n\n---------\n\n### Creat React typescript project\n```shell\n$ npx create-react-app my-app --template typescript\n$ yarn add @apollo/client graphql\n```\n---------\n\n### Connect Apollo Client to React with the ApolloProvider component. [src/index.tsx](src/index.tsx)\n```tsx\nimport {\n    ApolloClient,\n    InMemoryCache,\n    ApolloProvider\n} from \"@apollo/client\";\n\nconst client = new ApolloClient({\n    uri: 'https://48p1r2roz4.sse.codesandbox.io',\n    cache: new InMemoryCache()\n});\n\nrender(\n    \u003cApolloProvider client={client}\u003e\n        \u003cApp /\u003e\n    \u003c/ApolloProvider\u003e,\n    document.getElementById('root'),\n);\n```\n\n---------\n\n### Fetch data with useQuery that shares GraphQL data with your UI. [src/App.tsx](src/App.tsx)\n\n```tsx\nimport React from 'react';\nimport './App.css';\nimport {gql, useQuery} from \"@apollo/client\";\n\nconst EXCHANGE_RATES = gql`\n  query GetExchangeRates {\n    rates(currency: \"USD\") {\n      currency\n      rate\n    }\n  }\n`;\n\nfunction ExchangeRates() {\n    const {loading, error, data} = useQuery(EXCHANGE_RATES);\n\n    if (loading) return \u003cp\u003eLoading...\u003c/p\u003e;\n    if (error) return \u003cp\u003eError :(\u003c/p\u003e;\n\n    return data.rates.map(({currency, rate}: { currency: string, rate: number }) =\u003e (\n        \u003cdiv key={currency}\u003e\n            \u003cp\u003e\n                {currency}: {rate}\n            \u003c/p\u003e\n        \u003c/div\u003e\n    ));\n}\n\nfunction App() {\n    return (\n        \u003cdiv\u003e\n            \u003ch2\u003eget \"Currency Exchange Rates\" using Apollo \u0026 Graphql\u003c/h2\u003e\n            \u003cExchangeRates/\u003e\n        \u003c/div\u003e\n    );\n}\n\nexport default App;\n```\n\n---------\n\n## Official documentation [link](https://www.apollographql.com/docs/react/get-started/) or [https://graphql.org/](https://graphql.org/)\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Febazhanov%2Freact-graphql-example","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Febazhanov%2Freact-graphql-example","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Febazhanov%2Freact-graphql-example/lists"}