Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat : [typescript-react-apollo] support useSuspenseQuery #392

Merged
merged 14 commits into from
Oct 25, 2023
Merged

feat : [typescript-react-apollo] support useSuspenseQuery #392

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
d9a15bb
Implmement useSuspenseQuery in _buildHooks
Hal-ang Sep 8, 2023
55f18bb
Revert updated code from prettier
Hal-ang Sep 8, 2023
dc7462b
Update yarn
Hal-ang Sep 8, 2023
7ccc937
Update test codes for the added useSuspenseQuery
Hal-ang Sep 10, 2023
35d0ce5
Revert "Update yarn"
Hal-ang Sep 10, 2023
088416f
Update prettier
Hal-ang Sep 12, 2023
585b2f3
Update snapshot
Hal-ang Sep 15, 2023
1505c77
Merge main branch
Hal-ang Oct 1, 2023
691cb6c
Update snapshot
Hal-ang Oct 1, 2023
677be71
Merge branch 'main' into feat/useSuspenseQuery
Hal-ang Oct 4, 2023
290f32a
Generate dev-test examples
Hal-ang Oct 4, 2023
ccd2e6d
Update types.react-query
Hal-ang Oct 5, 2023
1d163b4
Merge branch 'dotansimha:main' into feat/useSuspenseQuery
Hal-ang Oct 21, 2023
38d320a
Create neat-sheep-protect.md
saihaj Oct 25, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 18 additions & 0 deletions packages/plugins/typescript/react-apollo/src/visitor.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -418,6 +418,24 @@ export class ReactApolloVisitor extends ClientSideBaseVisitor<
hookResults.push(
`export type ${lazyOperationName}HookResult = ReturnType<typeof use${lazyOperationName}>;`,
);

const suspenseOperationName: string =
this.convertName(nodeName, {
suffix: pascalCase('SuspenseQuery'),
useTypesPrefix: false,
}) + this.config.hooksSuffix;

hookFns.push(
`export function use${suspenseOperationName}(baseOptions?: ${this.getApolloReactHooksIdentifier()}.SuspenseQueryHookOptions<${operationResultType}, ${operationVariablesTypes}>) {
const options = {...defaultOptions, ...baseOptions}
return ${this.getApolloReactHooksIdentifier()}.useSuspenseQuery<${operationResultType}, ${operationVariablesTypes}>(${this.getDocumentNodeVariable(
node,
documentVariableName,
)}, options);
}`,
);
hookResults.push(`export type ${suspenseOperationName}HookResult = ReturnType<typeof use${suspenseOperationName}>;`
);
}

return [...hookFns, ...hookResults].join('\n');
Expand Down
20 changes: 20 additions & 0 deletions packages/plugins/typescript/react-apollo/tests/__snapshots__/react-apollo.spec.ts.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -190,8 +190,13 @@ export function useGet_SomethingLazyQuery(baseOptions?: Apollo.LazyQueryHookOpti
const options = {...defaultOptions, ...baseOptions}
return Apollo.useLazyQuery<Types.Get_SomethingQuery, Types.Get_SomethingQueryVariables>(Get_SomethingDocument, options);
}
export function useGet_SomethingSuspenseQuery(baseOptions?: Apollo.SuspenseQueryHookOptions<Types.Get_SomethingQuery, Types.Get_SomethingQueryVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useSuspenseQuery<Types.Get_SomethingQuery, Types.Get_SomethingQueryVariables>(Get_SomethingDocument, options);
}
export type Get_SomethingQueryHookResult = ReturnType<typeof useGet_SomethingQuery>;
export type Get_SomethingLazyQueryHookResult = ReturnType<typeof useGet_SomethingLazyQuery>;
export type Get_SomethingSuspenseQueryHookResult = ReturnType<typeof useGet_SomethingSuspenseQuery>;
export type Get_SomethingQueryResult = Apollo.QueryResult<Types.Get_SomethingQuery, Types.Get_SomethingQueryVariables>;"
`;

Expand Down Expand Up @@ -385,8 +390,13 @@ export function useGet_SomethingLazyQuery(baseOptions?: Apollo.LazyQueryHookOpti
const options = {...defaultOptions, ...baseOptions}
return Apollo.useLazyQuery<GQLGet_SomethingQuery, GQLGet_SomethingQueryVariables>(Get_SomethingDocument, options);
}
export function useGet_SomethingSuspenseQuery(baseOptions?: Apollo.SuspenseQueryHookOptions<GQLGet_SomethingQuery, GQLGet_SomethingQueryVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useSuspenseQuery<GQLGet_SomethingQuery, GQLGet_SomethingQueryVariables>(Get_SomethingDocument, options);
}
export type Get_SomethingQueryHookResult = ReturnType<typeof useGet_SomethingQuery>;
export type Get_SomethingLazyQueryHookResult = ReturnType<typeof useGet_SomethingLazyQuery>;
export type Get_SomethingSuspenseQueryHookResult = ReturnType<typeof useGet_SomethingSuspenseQuery>;
export type Get_SomethingQueryResult = Apollo.QueryResult<GQLGet_SomethingQuery, GQLGet_SomethingQueryVariables>;"
`;

Expand Down Expand Up @@ -580,8 +590,13 @@ export function useGetSomethingLazyQuery(baseOptions?: Apollo.LazyQueryHookOptio
const options = {...defaultOptions, ...baseOptions}
return Apollo.useLazyQuery<GetSomethingQuery, GetSomethingQueryVariables>(GetSomethingDocument, options);
}
export function useGetSomethingSuspenseQuery(baseOptions?: Apollo.SuspenseQueryHookOptions<GetSomethingQuery, GetSomethingQueryVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useSuspenseQuery<GetSomethingQuery, GetSomethingQueryVariables>(GetSomethingDocument, options);
}
export type GetSomethingQueryHookResult = ReturnType<typeof useGetSomethingQuery>;
export type GetSomethingLazyQueryHookResult = ReturnType<typeof useGetSomethingLazyQuery>;
export type GetSomethingSuspenseQueryHookResult = ReturnType<typeof useGetSomethingSuspenseQuery>;
export type GetSomethingQueryResult = Apollo.QueryResult<GetSomethingQuery, GetSomethingQueryVariables>;"
`;

Expand Down Expand Up @@ -775,8 +790,13 @@ export function useGetSomethingLazyQuery(baseOptions?: Apollo.LazyQueryHookOptio
const options = {...defaultOptions, ...baseOptions}
return Apollo.useLazyQuery<GetSomethingQuery, GetSomethingQueryVariables>(GetSomethingDocument, options);
}
export function useGetSomethingSuspenseQuery(baseOptions?: Apollo.SuspenseQueryHookOptions<GetSomethingQuery, GetSomethingQueryVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useSuspenseQuery<GetSomethingQuery, GetSomethingQueryVariables>(GetSomethingDocument, options);
}
export type GetSomethingQueryHookResult = ReturnType<typeof useGetSomethingQuery>;
export type GetSomethingLazyQueryHookResult = ReturnType<typeof useGetSomethingLazyQuery>;
export type GetSomethingSuspenseQueryHookResult = ReturnType<typeof useGetSomethingSuspenseQuery>;
export type GetSomethingQueryResult = Apollo.QueryResult<GetSomethingQuery, GetSomethingQueryVariables>;"
`;

Expand Down
100 changes: 98 additions & 2 deletions packages/plugins/typescript/react-apollo/tests/react-apollo.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1436,6 +1436,10 @@ export function useListenToCommentsSubscription(baseOptions?: Apollo.Subscriptio
export type FeedLazyQueryHookResult = ReturnType<typeof useFeedLazyQuery>;
`);

expect(content.content).toBeSimilarStringTo(`
export type FeedSuspenseQueryHookResult = ReturnType<typeof useFeedSuspenseQuery>;
`);

expect(content.content).toBeSimilarStringTo(`
export type SubmitRepositoryMutationHookResult = ReturnType<typeof useSubmitRepositoryMutation>;
`);
Expand Down Expand Up @@ -1719,6 +1723,40 @@ export function useListenToCommentsSubscription(baseOptions?: Apollo.Subscriptio
}`);
await validateTypeScript(content, schema, docs, {});
});
it('should generate suspense query hooks', async () => {
const documents = parse(/* GraphQL */ `
query feed {
feed {
id
commentCount
repository {
full_name
html_url
owner {
avatar_url
}
}
}
}
`);
const docs = [{ location: '', document: documents }];

const content = (await plugin(
schema,
docs,
{ withHooks: true, withComponent: false, withHOC: false },
{
outputFile: 'graphql.tsx',
},
)) as Types.ComplexPluginOutput;

expect(content.content).toBeSimilarStringTo(`
export function useFeedSuspenseQuery(baseOptions?: Apollo.SuspenseQueryHookOptions<FeedQuery, FeedQueryVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useSuspenseQuery<FeedQuery, FeedQueryVariables>(FeedDocument, options);
}`);
await validateTypeScript(content, schema, docs, {});
});
it('should generate lazy query hooks with proper hooksSuffix', async () => {
const documents = parse(/* GraphQL */ `
query feed {
Expand Down Expand Up @@ -1753,6 +1791,40 @@ export function useListenToCommentsSubscription(baseOptions?: Apollo.Subscriptio
}`);
await validateTypeScript(content, schema, docs, {});
});
it('should generate suspense query hooks with proper hooksSuffix', async () => {
const documents = parse(/* GraphQL */ `
query feed {
feed {
id
commentCount
repository {
full_name
html_url
owner {
avatar_url
}
}
}
}
`);
const docs = [{ location: '', document: documents }];

const content = (await plugin(
schema,
docs,
{ withHooks: true, withComponent: false, withHOC: false, hooksSuffix: 'MySuffix' },
{
outputFile: 'graphql.tsx',
},
)) as Types.ComplexPluginOutput;

expect(content.content).toBeSimilarStringTo(`
export function useFeedSuspenseQueryMySuffix(baseOptions?: Apollo.SuspenseQueryHookOptions<FeedQuery, FeedQueryVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useSuspenseQuery<FeedQuery, FeedQueryVariables>(FeedDocument, options);
}`);
await validateTypeScript(content, schema, docs, {});
});
});

describe('MutationOptions', () => {
Expand Down Expand Up @@ -2176,7 +2248,7 @@ export function useListenToCommentsSubscription(baseOptions?: Apollo.Subscriptio
await validateTypeScript(content, schema, docs, {});
});

it('should import Operations from one external file and use it in useQuery and useLazyQuery', async () => {
it('should import Operations from one external file and use it in useQuery, useLazyQuery and useSuspenseQuery', async () => {
const config: ReactApolloRawPluginConfig = {
documentMode: DocumentMode.external,
importDocumentNodeExternallyFrom: 'path/to/documents',
Expand Down Expand Up @@ -2204,6 +2276,12 @@ export function useListenToCommentsSubscription(baseOptions?: Apollo.Subscriptio
return Apollo.useLazyQuery<TestQuery, TestQueryVariables>(Operations.test, options);
}
`);
expect(content.content).toBeSimilarStringTo(`
export function useTestSuspenseQuery(baseOptions?: Apollo.SuspenseQueryHookOptions<TestQuery, TestQueryVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useSuspenseQuery<TestQuery, TestQueryVariables>(Operations.test, options);
}
`);
await validateTypeScript(content, schema, docs, {});
});

Expand Down Expand Up @@ -2457,6 +2535,12 @@ export function useListenToCommentsSubscription(baseOptions?: Apollo.Subscriptio
}
`);
expect(content.content).toBeSimilarStringTo(`
export function useTestOneSuspenseQuery(baseOptions?: Apollo.SuspenseQueryHookOptions<TestOneQuery, TestOneQueryVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useSuspenseQuery<TestOneQuery, TestOneQueryVariables>(Operations.testOne, options);
}
`);
expect(content.content).toBeSimilarStringTo(`
export function useTestTwoMutation(baseOptions?: Apollo.MutationHookOptions<TestTwoMutation, TestTwoMutationVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useMutation<TestTwoMutation, TestTwoMutationVariables>(Operations.testTwo, options);
Expand Down Expand Up @@ -2550,7 +2634,7 @@ export function useListenToCommentsSubscription(baseOptions?: Apollo.Subscriptio
await validateTypeScript(content, schema, docs, {});
});

it('should import Operations from near operation file for useQuery and useLazyQuery', async () => {
it('should import Operations from near operation file for useQuery, useLazyQuery and useSuspenseQuery', async () => {
const config: ReactApolloRawPluginConfig = {
documentMode: DocumentMode.external,
importDocumentNodeExternallyFrom: 'near-operation-file',
Expand Down Expand Up @@ -2578,6 +2662,12 @@ export function useListenToCommentsSubscription(baseOptions?: Apollo.Subscriptio
return Apollo.useLazyQuery<TestQuery, TestQueryVariables>(Operations.test, options);
}
`);
expect(content.content).toBeSimilarStringTo(`
export function useTestSuspenseQuery(baseOptions?: Apollo.SuspenseQueryHookOptions<TestQuery, TestQueryVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useSuspenseQuery<TestQuery, TestQueryVariables>(Operations.test, options);
}
`);
await validateTypeScript(content, schema, docs, {});
});

Expand Down Expand Up @@ -2829,6 +2919,12 @@ export function useListenToCommentsSubscription(baseOptions?: Apollo.Subscriptio
}
`);
expect(content.content).toBeSimilarStringTo(`
export function useTestOneSuspenseQuery(baseOptions?: Apollo.SuspenseQueryHookOptions<TestOneQuery, TestOneQueryVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useSuspenseQuery<TestOneQuery, TestOneQueryVariables>(Operations.testOne, options);
}
`);
expect(content.content).toBeSimilarStringTo(`
export function useTestTwoMutation(baseOptions?: Apollo.MutationHookOptions<TestTwoMutation, TestTwoMutationVariables>) {
const options = {...defaultOptions, ...baseOptions}
return Apollo.useMutation<TestTwoMutation, TestTwoMutationVariables>(Operations.testTwo, options);
Expand Down