diff --git a/project-fixtures/graphql-codegen-prj/GRAPHQL_OPERATIONS.md b/project-fixtures/graphql-codegen-prj/GRAPHQL_OPERATIONS.md index cf65498a..23cc3a7b 100644 --- a/project-fixtures/graphql-codegen-prj/GRAPHQL_OPERATIONS.md +++ b/project-fixtures/graphql-codegen-prj/GRAPHQL_OPERATIONS.md @@ -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) \ No newline at end of file diff --git a/project-fixtures/graphql-codegen-prj/README.md b/project-fixtures/graphql-codegen-prj/README.md index 0a00a3ad..58389b88 100644 --- a/project-fixtures/graphql-codegen-prj/README.md +++ b/project-fixtures/graphql-codegen-prj/README.md @@ -1,4 +1,4 @@ -# graphql-codege example +# graphql-codegen example ## How to run this example diff --git a/project-fixtures/graphql-codegen-prj/schema.graphql b/project-fixtures/graphql-codegen-prj/schema.graphql index 8235a037..9d220f39 100644 --- a/project-fixtures/graphql-codegen-prj/schema.graphql +++ b/project-fixtures/graphql-codegen-prj/schema.graphql @@ -1,12 +1,18 @@ type Post { id: ID! title: String! + body: String! author: User! + createdAt: String! + updatedAt: String! } type User { id: ID! name: String! + avatarURL: String! + createdAt: String! + updatedAt: String! } type Query { diff --git a/project-fixtures/graphql-codegen-prj/src/App.tsx b/project-fixtures/graphql-codegen-prj/src/App.tsx index 80fdc835..b333bd74 100644 --- a/project-fixtures/graphql-codegen-prj/src/App.tsx +++ b/project-fixtures/graphql-codegen-prj/src/App.tsx @@ -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 }) { - const post = useFragment(postFragment, props.post); - return ( -
-

{post.title}

- by {post.author.name} -
- ); -} - -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 ( -
- -
- ); + return ; } diff --git a/project-fixtures/graphql-codegen-prj/src/PopularPosts.tsx b/project-fixtures/graphql-codegen-prj/src/PopularPosts.tsx new file mode 100644 index 00000000..260bb842 --- /dev/null +++ b/project-fixtures/graphql-codegen-prj/src/PopularPosts.tsx @@ -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 ( + + ); +} diff --git a/project-fixtures/graphql-codegen-prj/src/PostSummary.tsx b/project-fixtures/graphql-codegen-prj/src/PostSummary.tsx new file mode 100644 index 00000000..86e7b326 --- /dev/null +++ b/project-fixtures/graphql-codegen-prj/src/PostSummary.tsx @@ -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 }) { + const post = useFragment(fragment, props.post); + return ( + <> + {post.title} + written by {post.author.name} + + ); +} diff --git a/project-fixtures/graphql-codegen-prj/src/UserAvatar.tsx b/project-fixtures/graphql-codegen-prj/src/UserAvatar.tsx new file mode 100644 index 00000000..bf577564 --- /dev/null +++ b/project-fixtures/graphql-codegen-prj/src/UserAvatar.tsx @@ -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 }) { + const user = useFragment(fragment, props.user); + + return {user.name}; +} diff --git a/project-fixtures/graphql-codegen-prj/src/gql/gql.ts b/project-fixtures/graphql-codegen-prj/src/gql/gql.ts index 8db87bf0..8acef2e5 100644 --- a/project-fixtures/graphql-codegen-prj/src/gql/gql.ts +++ b/project-fixtures/graphql-codegen-prj/src/gql/gql.ts @@ -13,8 +13,9 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/ * Therefore it is highly recommended to use the babel or swc plugin for production. */ const documents = { - "\n fragment Post_Post on Post {\n title\n author {\n name\n }\n }\n": types.Post_PostFragmentDoc, - "\n query AppQuery {\n popularPosts {\n id\n ...Post_Post\n }\n }\n": types.AppQueryDocument, + "\n query PopularPosts_Query {\n popularPosts {\n id\n ...PostSummary_Post\n }\n }\n": types.PopularPosts_QueryDocument, + "\n fragment PostSummary_Post on Post {\n id\n title\n author {\n name\n ...UserAvatar_User\n }\n }\n": types.PostSummary_PostFragmentDoc, + "\n fragment UserAvatar_User on User {\n name\n avatarURL\n }\n": types.UserAvatar_UserFragmentDoc, }; /** @@ -34,11 +35,15 @@ export function graphql(source: string): unknown; /** * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients. */ -export function graphql(source: "\n fragment Post_Post on Post {\n title\n author {\n name\n }\n }\n"): (typeof documents)["\n fragment Post_Post on Post {\n title\n author {\n name\n }\n }\n"]; +export function graphql(source: "\n query PopularPosts_Query {\n popularPosts {\n id\n ...PostSummary_Post\n }\n }\n"): (typeof documents)["\n query PopularPosts_Query {\n popularPosts {\n id\n ...PostSummary_Post\n }\n }\n"]; /** * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients. */ -export function graphql(source: "\n query AppQuery {\n popularPosts {\n id\n ...Post_Post\n }\n }\n"): (typeof documents)["\n query AppQuery {\n popularPosts {\n id\n ...Post_Post\n }\n }\n"]; +export function graphql(source: "\n fragment PostSummary_Post on Post {\n id\n title\n author {\n name\n ...UserAvatar_User\n }\n }\n"): (typeof documents)["\n fragment PostSummary_Post on Post {\n id\n title\n author {\n name\n ...UserAvatar_User\n }\n }\n"]; +/** + * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients. + */ +export function graphql(source: "\n fragment UserAvatar_User on User {\n name\n avatarURL\n }\n"): (typeof documents)["\n fragment UserAvatar_User on User {\n name\n avatarURL\n }\n"]; export function graphql(source: string) { return (documents as any)[source] ?? {}; diff --git a/project-fixtures/graphql-codegen-prj/src/gql/graphql.ts b/project-fixtures/graphql-codegen-prj/src/gql/graphql.ts index e4540590..84398844 100644 --- a/project-fixtures/graphql-codegen-prj/src/gql/graphql.ts +++ b/project-fixtures/graphql-codegen-prj/src/gql/graphql.ts @@ -19,8 +19,11 @@ export type Scalars = { export type Post = { __typename?: 'Post'; author: User; + body: Scalars['String']['output']; + createdAt: Scalars['String']['output']; id: Scalars['ID']['output']; title: Scalars['String']['output']; + updatedAt: Scalars['String']['output']; }; export type Query = { @@ -30,19 +33,28 @@ export type Query = { export type User = { __typename?: 'User'; + avatarURL: Scalars['String']['output']; + createdAt: Scalars['String']['output']; id: Scalars['ID']['output']; name: Scalars['String']['output']; + updatedAt: Scalars['String']['output']; }; -export type Post_PostFragment = { __typename?: 'Post', title: string, author: { __typename?: 'User', name: string } } & { ' $fragmentName'?: 'Post_PostFragment' }; +export type PopularPosts_QueryQueryVariables = Exact<{ [key: string]: never; }>; -export type AppQueryQueryVariables = Exact<{ [key: string]: never; }>; - -export type AppQueryQuery = { __typename?: 'Query', popularPosts: Array<( +export type PopularPosts_QueryQuery = { __typename?: 'Query', popularPosts: Array<( { __typename?: 'Post', id: string } - & { ' $fragmentRefs'?: { 'Post_PostFragment': Post_PostFragment } } + & { ' $fragmentRefs'?: { 'PostSummary_PostFragment': PostSummary_PostFragment } } )> }; -export const Post_PostFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"Post_Post"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Post"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"author"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}}]}}]}}]} as unknown as DocumentNode; -export const AppQueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"AppQuery"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"popularPosts"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"Post_Post"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"Post_Post"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Post"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"author"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}}]}}]}}]} as unknown as DocumentNode; \ No newline at end of file +export type PostSummary_PostFragment = { __typename?: 'Post', id: string, title: string, author: ( + { __typename?: 'User', name: string } + & { ' $fragmentRefs'?: { 'UserAvatar_UserFragment': UserAvatar_UserFragment } } + ) } & { ' $fragmentName'?: 'PostSummary_PostFragment' }; + +export type UserAvatar_UserFragment = { __typename?: 'User', name: string, avatarURL: string } & { ' $fragmentName'?: 'UserAvatar_UserFragment' }; + +export const UserAvatar_UserFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"UserAvatar_User"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"User"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"avatarURL"}}]}}]} as unknown as DocumentNode; +export const PostSummary_PostFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"PostSummary_Post"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Post"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"author"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"UserAvatar_User"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"UserAvatar_User"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"User"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"avatarURL"}}]}}]} as unknown as DocumentNode; +export const PopularPosts_QueryDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"PopularPosts_Query"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"popularPosts"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"PostSummary_Post"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"UserAvatar_User"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"User"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"avatarURL"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"PostSummary_Post"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Post"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"title"}},{"kind":"Field","name":{"kind":"Name","value":"author"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"FragmentSpread","name":{"kind":"Name","value":"UserAvatar_User"}}]}}]}}]} as unknown as DocumentNode; \ No newline at end of file