Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #1309 from Quramy/update_components
chore: Update Components
- Loading branch information
Showing
9 changed files
with
111 additions
and
75 deletions.
There are no files selected for viewing
28 changes: 10 additions & 18 deletions
28
project-fixtures/graphql-codegen-prj/GRAPHQL_OPERATIONS.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,40 +1,32 @@ | ||
| # Extracted GraphQL Operations | ||
| ## Queries | ||
|
|
||
| ### AppQuery | ||
| ### PopularPosts_Query | ||
|
|
||
| ```graphql | ||
| query AppQuery { | ||
| query PopularPosts_Query { | ||
| popularPosts { | ||
| id | ||
| ...Post_Post | ||
| ...PostSummary_Post | ||
| } | ||
| } | ||
|
|
||
| fragment Post_Post on Post { | ||
| fragment PostSummary_Post on Post { | ||
| id | ||
| title | ||
| author { | ||
| name | ||
| ...UserAvatar_User | ||
| } | ||
| } | ||
| ``` | ||
|
|
||
| From [src/App.tsx:24:24](src/App.tsx#L24-L31) | ||
|
|
||
| ## Fragments | ||
|
|
||
| ### Post_Post | ||
|
|
||
| ```graphql | ||
| fragment Post_Post on Post { | ||
| title | ||
| author { | ||
| name | ||
| } | ||
| fragment UserAvatar_User on User { | ||
| name | ||
| avatarURL | ||
| } | ||
| ``` | ||
|
|
||
| From [src/App.tsx:5:31](src/App.tsx#L5-L12) | ||
| From [src/PopularPosts.tsx:6:24](src/PopularPosts.tsx#L6-L13) | ||
|
|
||
| --- | ||
| Extracted by [ts-graphql-plugin](https://github.com/Quramy/ts-graphql-plugin) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,4 +1,4 @@ | ||
| # graphql-codege example | ||
| # graphql-codegen example | ||
|
|
||
| ## How to run this example | ||
|
|
||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,48 +1,5 @@ | ||
| import { useQuery } from '@apollo/client'; | ||
|
|
||
| import { graphql, useFragment, type FragmentType } from './gql'; | ||
|
|
||
| const postFragment = graphql(` | ||
| fragment Post_Post on Post { | ||
| title | ||
| author { | ||
| name | ||
| } | ||
| } | ||
| `); | ||
|
|
||
| function Post(props: { post: FragmentType<typeof postFragment> }) { | ||
| const post = useFragment(postFragment, props.post); | ||
| return ( | ||
| <div> | ||
| <p>{post.title}</p> | ||
| by <span>{post.author.name}</span> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| const query = graphql(` | ||
| query AppQuery { | ||
| popularPosts { | ||
| id | ||
| ...Post_Post | ||
| } | ||
| } | ||
| `); | ||
| import { PopularPosts } from './PopularPosts'; | ||
|
|
||
| export default function App() { | ||
| const { data } = useQuery(query); | ||
| if (!data) return null; | ||
|
|
||
| return ( | ||
| <main> | ||
| <ul> | ||
| {data.popularPosts.map(post => ( | ||
| <li key={post.id}> | ||
| <Post post={post} /> | ||
| </li> | ||
| ))} | ||
| </ul> | ||
| </main> | ||
| ); | ||
| return <PopularPosts />; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| import { useSuspenseQuery } from '@apollo/client'; | ||
| import { graphql } from './gql'; | ||
|
|
||
| import { PostSummary } from './PostSummary'; | ||
|
|
||
| const query = graphql(` | ||
| query PopularPosts_Query { | ||
| popularPosts { | ||
| id | ||
| ...PostSummary_Post | ||
| } | ||
| } | ||
| `); | ||
|
|
||
| export function PopularPosts() { | ||
| const { data } = useSuspenseQuery(query); | ||
| return ( | ||
| <ul> | ||
| {data.popularPosts.map(post => ( | ||
| <li key={post.id}> | ||
| <PostSummary post={post} /> | ||
| </li> | ||
| ))} | ||
| </ul> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| import { graphql, useFragment, type FragmentType } from './gql'; | ||
|
|
||
| import { UserAvatar } from './UserAvatar'; | ||
|
|
||
| const fragment = graphql(` | ||
| fragment PostSummary_Post on Post { | ||
| id | ||
| title | ||
| author { | ||
| name | ||
| ...UserAvatar_User | ||
| } | ||
| } | ||
| `); | ||
|
|
||
| export function PostSummary(props: { post: FragmentType<typeof fragment> }) { | ||
| const post = useFragment(fragment, props.post); | ||
| return ( | ||
| <> | ||
| <a href={`/posts/${post.id}`}>{post.title}</a> | ||
| written by <span>{post.author.name}</span> <UserAvatar user={post.author} /> | ||
| </> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| import { graphql, useFragment, type FragmentType } from './gql'; | ||
|
|
||
| const fragment = graphql(` | ||
| fragment UserAvatar_User on User { | ||
| name | ||
| avatarURL | ||
| } | ||
| `); | ||
|
|
||
| export function UserAvatar(props: { user: FragmentType<typeof fragment> }) { | ||
| const user = useFragment(fragment, props.user); | ||
|
|
||
| return <img src={user.avatarURL} alt={user.name} />; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters