{"id":24499282,"url":"https://github.com/dopaminedriven/github-search-graphql","last_synced_at":"2025-04-14T05:33:14.870Z","repository":{"id":50006114,"uuid":"371327275","full_name":"DopamineDriven/github-search-graphql","owner":"DopamineDriven","description":"Next, TypeScript, GitHub GraphQL Integration, Apollo Client, SWR, Codegen, Tailwindcss, HeadlessUI, etc","archived":false,"fork":false,"pushed_at":"2021-06-10T07:49:07.000Z","size":6581,"stargazers_count":6,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-27T19:21:29.463Z","etag":null,"topics":["apollo-client","codegen","github-api","graphql","nextjs","swr","tailwindcss","typescript","vercel"],"latest_commit_sha":null,"homepage":"https://github-search-graphql-blond.vercel.app/","language":"TypeScript","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/DopamineDriven.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":"2021-05-27T10:02:12.000Z","updated_at":"2023-12-05T15:35:21.000Z","dependencies_parsed_at":"2022-08-31T00:31:48.516Z","dependency_job_id":null,"html_url":"https://github.com/DopamineDriven/github-search-graphql","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DopamineDriven%2Fgithub-search-graphql","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DopamineDriven%2Fgithub-search-graphql/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DopamineDriven%2Fgithub-search-graphql/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DopamineDriven%2Fgithub-search-graphql/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DopamineDriven","download_url":"https://codeload.github.com/DopamineDriven/github-search-graphql/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248827274,"owners_count":21167856,"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-client","codegen","github-api","graphql","nextjs","swr","tailwindcss","typescript","vercel"],"created_at":"2025-01-21T22:13:51.774Z","updated_at":"2025-04-14T05:33:14.850Z","avatar_url":"https://github.com/DopamineDriven.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# github-search-graphql\n\n![dynamic-routing](./public/dynamic-routing.png)\n\n### Getting Started\n\n- Please see [`environmental-variables.md`](https://github.com/DopamineDriven/github-search-graphql/blob/main/environmental-variables.md)\n\n### Running the program\n\n- I use yarn so please do not use npm to install the dependencies unless you delete `yarn.lock` prior to installing. That said, after installing dependencies, add the environmental variables -- instructions can be found in the root `./environmental-variables.md` file. Then, run `yarn codegen`. After successfully generating typescript definitions from graphql fragments/queries/mutations, run `yarn dev`. That's it!\n\n### Tips\n\n- Ensure the username exists when searching from the landing page. I am using `getServerSideProps` for all dynamic search/details-handling for any given user routes (in `pages/repos/[login].tsx` and `pages/repos/[login]/[details].tsx`). Conversely, I am using `getStaticPaths` and `getStaticProps` as a POC for my personal repos in `pages/repositories/[owner]/[name].tsx`. The latter config harnesses the power of ISR (Incremental Static Regeneration). That said, it is probably ideal to use getServerSideProps over getStaticPaths/getStaticProps for an app of this nature due to the virtually infinite amount of data that can be fetched depending on user/org queried. Therefore, I intend to implement SWR for client-side caching after preliminary data is injected via inference of server-shuttled data on the client.\n\n![analytics.png](./public/analytics.png)\n\n### Underway\n\n- I have several bigger picture goals underway in this app including auth+mutations such as leaving comments and opening or closing issues. Another goal is pagination. Many of the components involved in current construction can be found in `components/UnderConstruction`.\n\n### Housekeeping continued\n\n- I will be fractionating large components (such as seen in pages/repos/[login]/[organization]) into smaller reusable components\n- That said, I do have an agnostic repothread component found in `components/UI` that is used extensively throughout this repo. `ISSUES` is still actively under construction and not up to par for my standard at the moment. That said, pages/[login]/[details].tsx does provide a great issues details preview 👍\n\n## Outlook\n\n- Users vs Organizations\n- Users have 20-character-Owner-Ids\n- Organizations such as Vercel or Facebook have 28-to-32-character-Owner-Ids\n- I figured that the id would provide differentiation for user account type. Interestingly, users remain consistent at 20 across several ids tested (mine, lee rob's, and tim neutken's). However, organization ID lengths varied +/-4 between 28 and 32 characters in length\n\n###### ORG User Accounts are 28-32 Characters in length\n\n- VERCEL: 32\n  - \"id\": \"MDEyOk9yZ2FuaXphdGlvbjE0OTg1MDIw\",\n- FACEBOOK: 28\n  - \"id\": \"MDEyOk9yZ2FuaXphdGlvbjY5NjMx\",\n\n###### Personal User Accounts are 20 characters in length\n\n- LEE ROB: 20\n\n  - \"id\": \"MDQ6VXNlcjkxMTM3NDA=\",\n\n- ANDREW ROSS: 20\n\n  - \"id\": \"MDQ6VXNlcjQ2MzU1Nzk3\"\n\n- TIM NEUTKENS: 20\n\n  - \"id\": \" MDQ6VXNlcjYzMjQxOTk=\"\n\n- ~~`plan A`~~\n\n```tsx\n\u003cLink\n\thref={\n\t\trepo.node.owner.id.length \u003e 20\n\t\t\t? '/repos/[login]/[organization]'\n\t\t\t: `/repos/[login]/[details]`\n\t}\n\tas={`/repos/${repo.node.nameWithOwner}`}\n\tpassHref\n\tshallow={true}\n\tscroll={true}\n\u003e\n\t{/*...*/}\n\u003c/Link\u003e\n```\n\n- running `yarn dev`\n\n```git\ninfo  - Using external babel configuration from C:\\Users\\Anthr\\cortina\\github-search-graphql\\.babelrc\nevent - compiled successfully\nError: You cannot use different slug names for the same dynamic path ('details' !== 'organization').\n    at handleSlug (C:\\Users\\Anthr\\cortina\\github-search-graphql\\node_modules\\next\\dist\\next-server\\lib\\router\\utils\\sorted-routes.js:12:7)\n    at UrlNode._insert (C:\\Users\\Anthr\\cortina\\github-search-graphql\\node_modules\\next\\dist\\next-server\\lib\\router\\utils\\sorted-routes.js:16:131)\n    at UrlNode._insert (C:\\Users\\Anthr\\cortina\\github-search-graphql\\node_modules\\next\\dist\\next-server\\lib\\router\\utils\\sorted-routes.js:19:114)\n    at UrlNode._insert (C:\\Users\\Anthr\\cortina\\github-search-graphql\\node_modules\\next\\dist\\next-server\\lib\\router\\utils\\sorted-routes.js:19:114)\n    at UrlNode.insert (C:\\Users\\Anthr\\cortina\\github-search-graphql\\node_modules\\next\\dist\\next-server\\lib\\router\\utils\\sorted-routes.js:1:247)\n    at C:\\Users\\Anthr\\cortina\\github-search-graphql\\node_modules\\next\\dist\\next-server\\lib\\router\\utils\\sorted-routes.js:30:40\n    at Array.forEach (\u003canonymous\u003e)\n    at getSortedRoutes (C:\\Users\\Anthr\\cortina\\github-search-graphql\\node_modules\\next\\dist\\next-server\\lib\\router\\utils\\sorted-routes.js:30:17)\n    at Watchpack.\u003canonymous\u003e (C:\\Users\\Anthr\\cortina\\github-search-graphql\\node_modules\\next\\dist\\server\\next-dev-server.js:14:46)\n    at Watchpack.emit (node:events:365:28)\n    at Watchpack._onTimeout (C:\\Users\\Anthr\\cortina\\github-search-graphql\\node_modules\\watchpack\\lib\\watchpack.js:331:8)\n    at listOnTimeout (node:internal/timers:557:17)\n    at processTimers (node:internal/timers:500:7)\nerror Command failed with exit code 1.\ninfo Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.\n```\n\n- Plan A did not work, troubleshooting will continue with any updates posted accordingly\n\n- Update, incorporating `...on User` | `...on Organization` GraphQL `__typename` conditional into query\n\n---\n\n- GraphQL Graveyard\n\n```graphql\nfragment GitHubPageInfoPartial on PageInfo {\n\tstartCursor\n\tendCursor\n\thasNextPage\n\thasPreviousPage\n}\n\nfragment GitHubLanguagePartial on Language {\n\tcolor\n\tid\n\tname\n}\n\nfragment GitHubRepoOwnerPartial on RepositoryOwner {\n\tavatarUrl(size: 12)\n\tid\n\tlogin\n\turl\n}\n\nfragment GitHubLanguagesPartial on LanguageConnection {\n\ttotalSize\n\ttotalCount\n\tpageInfo {\n\t\t...GitHubPageInfoPartial\n\t}\n\tedges {\n\t\tcursor\n\t\tsize\n\t\tnode {\n\t\t\t...GitHubLanguagePartial\n\t\t}\n\t}\n}\n\nfragment GitHubLicenseRulePartial on LicenseRule {\n\tkey\n\tlabel\n\tdescription\n}\n\nfragment GitHubLicensePartial on License {\n\tid\n\tkey\n\tnickname\n\tname\n\tspdxId\n\tpseudoLicense\n\tdescription\n\turl\n\tconditions {\n\t\t...GitHubLicenseRulePartial\n\t}\n\tlimitations {\n\t\t...GitHubLicenseRulePartial\n\t}\n\tpermissions {\n\t\t...GitHubLicenseRulePartial\n\t}\n}\n\nfragment GitHubRepositoryPartial on Repository {\n\tid\n\tname\n\turl\n\tshortDescriptionHTML\n\tdescriptionHTML\n\tdescription\n\tcreatedAt\n\tupdatedAt\n\tdiskUsage\n\thomepageUrl\n\tstargazerCount\n\tforkCount\n\topenGraphImageUrl\n\tusesCustomOpenGraphImage\n\tisArchived\n\tisInOrganization\n\twatchers {\n\t\ttotalCount\n\t}\n\tlanguages(orderBy: { field: SIZE, direction: DESC }) {\n\t\t...GitHubLanguagesPartial\n\t}\n\tlicenseInfo {\n\t\t...GitHubLicensePartial\n\t}\n\towner {\n\t\t...GitHubRepoOwnerPartial\n\t}\n\tprimaryLanguage {\n\t\t...GitHubLanguagePartial\n\t}\n}\n\nfragment GitHubSearchResultItemConnectionPartial on SearchResultItemConnection {\n\tcodeCount\n\tuserCount\n\tissueCount\n\trepositoryCount\n\tpageInfo {\n\t\t...GitHubPageInfoPartial\n\t}\n\tedges {\n\t\tcursor\n\t\tnode {\n\t\t\t...GitHubRepositoryPartial\n\t\t}\n\t}\n}\n\nquery GitHubSearchRepos($query: String!, $first: Int!) {\n\tSearch: search(\n\t\tfirst: $first\n\t\tquery: $query\n\t\ttype: REPOSITORY\n\t) {\n\t\t...GitHubSearchResultItemConnectionPartial\n\t}\n}\n```\n\n`comment-fields.graphql`\n\n```graphql\n# import GitHubActorPartial from './actor-fields.graphql'\n# import GitHubReactionConnectionPartial from './reaction-fields.graphql'\n# import GitHubPageInfoPartial from './page-info-fields.graphql'\n\nfragment GitHubDiscussionCommentPartial on GitHubDiscussionComment {\n\tid\n\turl\n\tisAnswer\n\tcreatedAt\n\tupdatedAt\n\tupvoteCount\n\tbody\n\tbodyHTML\n\tauthor {\n\t\t...GitHubActorPartial\n\t}\n\treactions(first: 20) {\n\t\t...GitHubReactionConnectionPartial\n\t}\n}\n\nfragment GitHubDiscussionCommentsPartial on GitHubDiscussionCommentConnection {\n\tedges {\n\t\tcursor\n\t\tnode {\n\t\t\t...GitHubDiscussionCommentPartial\n\t\t}\n\t}\n\ttotalCount\n\tpageInfo {\n\t\t...GitHubPageInfoPartial\n\t}\n}\n```\n\n`category-fields.graphql`\n\n```graphql\nfragment GitHubDiscussionsCategory on GitHubDiscussionCategory {\n\tid\n\tname\n\temojiHTML\n\temoji\n\tcreatedAt\n\tupdatedAt\n\tisAnswerable\n\tdescription\n}\n```\n\n`discussion-fields.graphql`\n\n```graphql\n# import GitHubActorPartial from './atomic/actor-fields.graphql'\n# import GitHubDiscussionCommentsPartial from './atomic/comment-fields.graphql'\n# import GitHubDiscussionCommentPartial from './atomic/comment-fields.graphql'\n# import GitHubDiscussionsCategory from './atomic/category-fields.graphql'\n# import GitHubReactionConnectionPartial from './atomic/reaction-fields.graphql'\n# import GitHubPageInfoPartial from './atomic/page-info-fields.graphql'\n\nfragment GitHubDiscussionPartial on GitHubDiscussion {\n\tid\n\turl\n\tnumber\n\ttitle\n\tupvoteCount\n\tcreatedAt\n\tincludesCreatedEdit\n\tupdatedAt\n\tbody\n\tbodyHTML\n\tanswer {\n\t\t...GitHubDiscussionCommentPartial\n\t}\n\tauthor {\n\t\t...GitHubActorPartial\n\t}\n\tcategory {\n\t\t...GitHubDiscussionsCategory\n\t}\n\treactions(first: 20) {\n\t\t...GitHubReactionConnectionPartial\n\t}\n\tcomments(first: 10) {\n\t\t...GitHubDiscussionCommentsPartial\n\t}\n}\n\nfragment GitHubDiscussionsPartial on GitHubDiscussionConnection {\n\ttotalCount\n\tpageInfo {\n\t\t...GitHubPageInfoPartial\n\t}\n\tedges {\n\t\tcursor\n\t\tnode {\n\t\t\t...GitHubDiscussionPartial\n\t\t}\n\t}\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdopaminedriven%2Fgithub-search-graphql","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdopaminedriven%2Fgithub-search-graphql","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdopaminedriven%2Fgithub-search-graphql/lists"}