{"id":21037640,"url":"https://github.com/mapledevjs/graphql-tutorial","last_synced_at":"2026-02-19T15:35:58.343Z","repository":{"id":40749473,"uuid":"327955544","full_name":"mapleDevJS/graphql-tutorial","owner":"mapleDevJS","description":"Introduction to the GraphQL","archived":false,"fork":false,"pushed_at":"2025-04-11T22:16:37.000Z","size":1430,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-28T16:06:14.446Z","etag":null,"topics":["graphql","react","vite"],"latest_commit_sha":null,"homepage":"https://graphql-tutorial.netlify.app/","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/mapleDevJS.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-01-08T16:30:26.000Z","updated_at":"2025-04-11T22:16:34.000Z","dependencies_parsed_at":"2025-04-11T23:22:46.052Z","dependency_job_id":"92e91868-1058-4017-aad4-5d5c41c53ea1","html_url":"https://github.com/mapleDevJS/graphql-tutorial","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/mapleDevJS/graphql-tutorial","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mapleDevJS%2Fgraphql-tutorial","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mapleDevJS%2Fgraphql-tutorial/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mapleDevJS%2Fgraphql-tutorial/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mapleDevJS%2Fgraphql-tutorial/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mapleDevJS","download_url":"https://codeload.github.com/mapleDevJS/graphql-tutorial/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mapleDevJS%2Fgraphql-tutorial/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29620144,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-19T13:04:20.082Z","status":"ssl_error","status_checked_at":"2026-02-19T13:03:33.775Z","response_time":117,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["graphql","react","vite"],"created_at":"2024-11-19T13:27:19.602Z","updated_at":"2026-02-19T15:35:58.328Z","avatar_url":"https://github.com/mapleDevJS.png","language":"JavaScript","readme":"[![Netlify Status](https://api.netlify.com/api/v1/badges/a91f9b08-dffe-43b5-b540-b968ed225a58/deploy-status)](https://app.netlify.com/sites/graphql-tutorial/deploys)\n\n# My Apollo Client Application\n\nThis project is a React application that interacts with the GitHub GraphQL API using Apollo Client.\n\n## Table of Contents\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [Components](#components)\n- [GraphQL Queries](#graphql-queries)\n- [License](#license)\n\n## Installation\n\nTo get started with this project, clone the repository and install the dependencies:\n\n```sh\ngit clone \u003crepository_url\u003e\ncd \u003crepository_directory\u003e\nnpm install\n```\n\nEnsure you add a `.env` file in the root directory and specify your GitHub API token:\n\n```sh\nVITE_GITHUB_API_TOKEN=your_github_token_here\n```\n\n## Usage\n\nTo run the application, use the following command:\n\n```sh\nnpm run dev\n```\n\nThis will start the development server, and you can view the app in your browser at `http://localhost:3000`.\n\n## Components\n\nThis application includes the following key components:\n\n- **`Apollo Client Setup`**: The setup for Apollo Client, including linking HTTP and authentication headers.\n- **`App Component`**: The main React component that renders the application.\n\n## Detailed Explanation\n\n### GraphQL URI\n\nThe application connects to the GitHub GraphQL API using the following URI:\n\n```javascript\nconst GRAPHQL_URI = 'https://api.github.com/graphql';\n```\n\n## GraphQL Queries\n\n### Popular Repositories List\n\nThis query retrieves a list of repositories with more than 50,000 stars, returning the top 10 results:\n\n```javascript\nconst POPULAR_REPOSITORIES_LIST = gql`\n{\n  search(query: \"stars:\u003e50000\", type: REPOSITORY, first: 10) {\n    repositoryCount\n    edges {\n      node {\n        ... on Repository {\n          name\n          owner {\n            login\n          }\n          stargazers {\n            totalCount\n          }\n        }\n      }\n    }\n  }\n}\n`;\n\nclient.query({ query: POPULAR_REPOSITORIES_LIST }).then(console.log);\n```\n\n## License\n\nThis project is licensed under the MIT License.","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmapledevjs%2Fgraphql-tutorial","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmapledevjs%2Fgraphql-tutorial","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmapledevjs%2Fgraphql-tutorial/lists"}