{"id":15541334,"url":"https://github.com/taigakiyokawa/fragment-colocation-sample-app","last_synced_at":"2026-04-18T01:03:58.276Z","repository":{"id":126676443,"uuid":"575915502","full_name":"taigakiyokawa/fragment-colocation-sample-app","owner":"taigakiyokawa","description":" The sample application to colocate GraphQL operations using fragments with React Components.","archived":false,"fork":false,"pushed_at":"2022-12-11T03:01:38.000Z","size":239,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-10-03T12:20:52.842Z","etag":null,"topics":["apollo","graphql","graphql-codegen","nextjs"],"latest_commit_sha":null,"homepage":"https://zenn.dev/moneyforward/articles/20221211-fragment-colocation","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/taigakiyokawa.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":"2022-12-08T15:31:44.000Z","updated_at":"2024-01-10T14:49:56.000Z","dependencies_parsed_at":"2023-06-17T15:45:46.571Z","dependency_job_id":null,"html_url":"https://github.com/taigakiyokawa/fragment-colocation-sample-app","commit_stats":{"total_commits":42,"total_committers":1,"mean_commits":42.0,"dds":0.0,"last_synced_commit":"fe77a615447908e3538da86a265a83b317625382"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taigakiyokawa%2Ffragment-colocation-sample-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taigakiyokawa%2Ffragment-colocation-sample-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taigakiyokawa%2Ffragment-colocation-sample-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/taigakiyokawa%2Ffragment-colocation-sample-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/taigakiyokawa","download_url":"https://codeload.github.com/taigakiyokawa/fragment-colocation-sample-app/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246117855,"owners_count":20726086,"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","graphql","graphql-codegen","nextjs"],"created_at":"2024-10-02T12:16:34.793Z","updated_at":"2026-04-18T01:03:53.246Z","avatar_url":"https://github.com/taigakiyokawa.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Fragment Colocation Sample App\n\nUsed in the article 👉 [GraphQL の Fragment Colocation を導入したら依存関係がスッキリしてクエリもコンポーネントも書きやすくなった](https://zenn.dev/moneyforward/articles/20221211-fragment-colocation).\n\nThe sample application to colocate GraphQL operations using fragments with React Components.\nThis app is based on [next.js.examples/api-routes-apollo-server-and-client](https://github.com/vercel/next.js/tree/6cfebfb02c2a52a1f99fca59a2eac2d704d053db/examples/api-routes-apollo-server-and-client).\n\n![component_image](https://user-images.githubusercontent.com/40013676/206884203-c04d4713-5a7d-4de7-9a16-b8a8c4293b29.png)\n\n## Correspondence between a query and components\n\n### Before using fragments\n\n![before_colocate](https://user-images.githubusercontent.com/40013676/206859576-d0083a84-630f-424b-98c9-58b50abdca62.png)\n\n### After using fragments\n\n![after_colocate](https://user-images.githubusercontent.com/40013676/206859566-29c9125e-e6a9-43fc-a6f7-7c4d214ba6de.png)\n\n- [[refactor] Colocate GraphQL operations with components #6](https://github.com/taigakiyokawa/fragment-colocation-sample-app/pull/6): the PR to colocate GraphQL operations with components\n- [`before-colocated-fragments`](https://github.com/taigakiyokawa/fragment-colocation-sample-app/tree/before-colocate-fragments): the branch before colocated GraphQL operations with components\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftaigakiyokawa%2Ffragment-colocation-sample-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftaigakiyokawa%2Ffragment-colocation-sample-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftaigakiyokawa%2Ffragment-colocation-sample-app/lists"}