https://github.com/taigakiyokawa/fragment-colocation-sample-app

The sample application to colocate GraphQL operations using fragments with React Components.
https://github.com/taigakiyokawa/fragment-colocation-sample-app

apollo graphql graphql-codegen nextjs

Last synced: 3 months ago
JSON representation

The sample application to colocate GraphQL operations using fragments with React Components.

• Host: GitHub
• URL: https://github.com/taigakiyokawa/fragment-colocation-sample-app
• Owner: taigakiyokawa
• Created: 2022-12-08T15:31:44.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2022-12-11T03:01:38.000Z (over 3 years ago)
• Last Synced: 2024-10-03T12:20:52.842Z (almost 2 years ago)
• Topics: apollo, graphql, graphql-codegen, nextjs
• Language: TypeScript
• Homepage: https://zenn.dev/moneyforward/articles/20221211-fragment-colocation
• Size: 233 KB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Fragment Colocation Sample App

Used in the article 👉 [GraphQL の Fragment Colocation を導入したら依存関係がスッキリしてクエリもコンポーネントも書きやすくなった](https://zenn.dev/moneyforward/articles/20221211-fragment-colocation).

The sample application to colocate GraphQL operations using fragments with React Components.

This 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).

![component_image](https://user-images.githubusercontent.com/40013676/206884203-c04d4713-5a7d-4de7-9a16-b8a8c4293b29.png)

## Correspondence between a query and components

### Before using fragments

![before_colocate](https://user-images.githubusercontent.com/40013676/206859576-d0083a84-630f-424b-98c9-58b50abdca62.png)

### After using fragments

![after_colocate](https://user-images.githubusercontent.com/40013676/206859566-29c9125e-e6a9-43fc-a6f7-7c4d214ba6de.png)

- [[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

- [`before-colocated-fragments`](https://github.com/taigakiyokawa/fragment-colocation-sample-app/tree/before-colocate-fragments): the branch before colocated GraphQL operations with components