From c4ce9fda5677ea54df7c7a58695028f41a74ddd6 Mon Sep 17 00:00:00 2001 From: Alec Aivazis Date: Mon, 23 Jan 2023 18:40:00 -0800 Subject: [PATCH 01/26] remove direction from refetch object --- packages/houdini/src/codegen/transforms/paginate.ts | 1 - packages/houdini/src/runtime/lib/types.ts | 1 - 2 files changed, 2 deletions(-) diff --git a/packages/houdini/src/codegen/transforms/paginate.ts b/packages/houdini/src/codegen/transforms/paginate.ts index aea913c27..a7bdbfbcf 100644 --- a/packages/houdini/src/codegen/transforms/paginate.ts +++ b/packages/houdini/src/codegen/transforms/paginate.ts @@ -324,7 +324,6 @@ export default async function paginate( embedded: nodeQuery, targetType, paginated: true, - direction: flags.last.enabled ? 'backwards' : 'forward', } // add the correct default page size diff --git a/packages/houdini/src/runtime/lib/types.ts b/packages/houdini/src/runtime/lib/types.ts index 156e88aa3..5a7f1137d 100644 --- a/packages/houdini/src/runtime/lib/types.ts +++ b/packages/houdini/src/runtime/lib/types.ts @@ -97,7 +97,6 @@ export type BaseCompiledDocument = { embedded: boolean targetType: string paginated: boolean - direction?: 'forward' | 'backwards' } pluginsData?: Record } From 0a63dfa8d67145ee5dc98a01040c0be1ae9a9d70 Mon Sep 17 00:00:00 2001 From: Alec Aivazis Date: Mon, 23 Jan 2023 18:55:49 -0800 Subject: [PATCH 02/26] more store definitions --- .../src/plugin/codegen/stores/query.test.ts | 8 +-- .../src/plugin/codegen/stores/query.ts | 3 +- packages/houdini-svelte/src/plugin/index.ts | 6 +-- packages/houdini-svelte/src/plugin/kit.ts | 10 +--- .../src/runtime/stores/pagination/fragment.ts | 53 ++----------------- .../src/runtime/stores/pagination/index.ts | 9 +--- .../src/runtime/stores/pagination/query.ts | 32 ++--------- .../generators/artifacts/artifacts.test.ts | 6 +-- .../generators/artifacts/pagination.test.ts | 12 ++--- .../src/codegen/transforms/paginate.test.ts | 22 +++----- 10 files changed, 33 insertions(+), 128 deletions(-) diff --git a/packages/houdini-svelte/src/plugin/codegen/stores/query.test.ts b/packages/houdini-svelte/src/plugin/codegen/stores/query.test.ts index 4b5009a49..92362e528 100644 --- a/packages/houdini-svelte/src/plugin/codegen/stores/query.test.ts +++ b/packages/houdini-svelte/src/plugin/codegen/stores/query.test.ts @@ -214,10 +214,10 @@ test('forward cursor pagination', async function () { // check the file contents await expect(parsed).toMatchInlineSnapshot(` - import { QueryStoreForwardCursor } from '$houdini/plugins/houdini-svelte/runtime/stores' + import { QueryStoreCursor } from '$houdini/plugins/houdini-svelte/runtime/stores' import artifact from '$houdini/artifacts/TestQuery' - export class TestQueryStore extends QueryStoreForwardCursor { + export class TestQueryStore extends QueryStoreCursor { constructor() { super({ artifact, @@ -263,10 +263,10 @@ test('backwards cursor pagination', async function () { // check the file contents await expect(parsed).toMatchInlineSnapshot(` - import { QueryStoreBackwardCursor } from '$houdini/plugins/houdini-svelte/runtime/stores' + import { QueryStoreCursor } from '$houdini/plugins/houdini-svelte/runtime/stores' import artifact from '$houdini/artifacts/TestQuery' - export class TestQueryStore extends QueryStoreBackwardCursor { + export class TestQueryStore extends QueryStoreCursor { constructor() { super({ artifact, diff --git a/packages/houdini-svelte/src/plugin/codegen/stores/query.ts b/packages/houdini-svelte/src/plugin/codegen/stores/query.ts index 0f7cbf9d9..0b4bf3e0a 100644 --- a/packages/houdini-svelte/src/plugin/codegen/stores/query.ts +++ b/packages/houdini-svelte/src/plugin/codegen/stores/query.ts @@ -31,8 +31,7 @@ export async function queryStore( // in order to build the store, we need to know what class we're going to import from let which: keyof Required['customStores'] = 'query' if (paginationMethod === 'cursor') { - which = - doc.refetch?.direction === 'forward' ? 'queryForwardsCursor' : 'queryBackwardsCursor' + which = 'queryCursor' } else if (paginationMethod === 'offset') { which = 'queryOffset' } diff --git a/packages/houdini-svelte/src/plugin/index.ts b/packages/houdini-svelte/src/plugin/index.ts index 1bdc39fe3..dea304382 100644 --- a/packages/houdini-svelte/src/plugin/index.ts +++ b/packages/houdini-svelte/src/plugin/index.ts @@ -242,11 +242,9 @@ export type HoudiniSvelteConfig = { mutation?: string subscription?: string fragment?: string - queryForwardsCursor?: string - queryBackwardsCursor?: string + queryCursor?: string queryOffset?: string - fragmentForwardsCursor?: string - fragmentBackwardsCursor?: string + fragmentCursor?: string fragmentOffset?: string } } diff --git a/packages/houdini-svelte/src/plugin/kit.ts b/packages/houdini-svelte/src/plugin/kit.ts index e05b00bd0..f57109983 100644 --- a/packages/houdini-svelte/src/plugin/kit.ts +++ b/packages/houdini-svelte/src/plugin/kit.ts @@ -371,15 +371,9 @@ export function plugin_config(config: Config): Required { mutation: '$houdini/plugins/houdini-svelte/runtime/stores.MutationStore', fragment: '$houdini/plugins/houdini-svelte/runtime/stores.FragmentStore', subscription: '$houdini/plugins/houdini-svelte/runtime/stores.SubscriptionStore', - queryForwardsCursor: - '$houdini/plugins/houdini-svelte/runtime/stores.QueryStoreForwardCursor', - queryBackwardsCursor: - '$houdini/plugins/houdini-svelte/runtime/stores.QueryStoreBackwardCursor', + queryCursor: '$houdini/plugins/houdini-svelte/runtime/stores.QueryStoreCursor', queryOffset: '$houdini/plugins/houdini-svelte/runtime/stores.QueryStoreOffset', - fragmentForwardsCursor: - '$houdini/plugins/houdini-svelte/runtime/stores.FragmentStoreForwardCursor', - fragmentBackwardsCursor: - '$houdini/plugins/houdini-svelte/runtime/stores.FragmentStoreBackwardCursor', + fragmentCursor: '$houdini/plugins/houdini-svelte/runtime/stores.FragmentStoreCursor', fragmentOffset: '$houdini/plugins/houdini-svelte/runtime/stores.FragmentStoreOffset', ...cfg?.customStores, }, diff --git a/packages/houdini-svelte/src/runtime/stores/pagination/fragment.ts b/packages/houdini-svelte/src/runtime/stores/pagination/fragment.ts index 88760a396..8f7dc9191 100644 --- a/packages/houdini-svelte/src/runtime/stores/pagination/fragment.ts +++ b/packages/houdini-svelte/src/runtime/stores/pagination/fragment.ts @@ -69,7 +69,7 @@ class BasePaginatedFragmentStore<_Data extends GraphQLObject, _Input> { } // both cursor paginated stores add a page info to their subscribe -class FragmentStoreCursor< +export class FragmentStoreCursor< _Data extends GraphQLObject, _Input extends Record > extends BasePaginatedFragmentStore<_Data, _Input> { @@ -110,6 +110,10 @@ class FragmentStoreCursor< fetching: derived(store, ($store) => $store.fetching), fetch: handlers.fetch, pageInfo: handlers.pageInfo, + + // add the pagination handlers + loadNextPage: handlers.loadNextPage, + loadPreviousPage: handlers.loadPreviousPage, } } @@ -143,53 +147,6 @@ class FragmentStoreCursor< } } -// FragmentStoreForwardCursor adds loadNextPage to FragmentStoreCursor -export class FragmentStoreForwardCursor< - _Data extends GraphQLObject, - _Input extends Record -> extends FragmentStoreCursor<_Data, _Input> { - get(initialValue: _Data | null) { - // get the base class - const parent = super.get(initialValue) - const observer = getClient().observe<_Data, _Input>({ - artifact: this.paginationArtifact, - initialValue, - }) - - // generate the pagination handlers - const handlers = this.storeHandlers(observer) - - return { - ...parent, - // add the specific handlers for this situation - loadNextPage: handlers.loadNextPage, - } - } -} - -// BackwardFragmentStoreCursor adds loadPreviousPage to FragmentStoreCursor -export class FragmentStoreBackwardCursor< - _Data extends GraphQLObject, - _Input extends Record -> extends FragmentStoreCursor<_Data, _Input> { - get(initialValue: _Data | null) { - const parent = super.get(initialValue) - const observer = getClient().observe<_Data, _Input>({ - artifact: this.paginationArtifact, - initialValue, - }) - - // generate the pagination handlers - const handlers = this.storeHandlers(observer) - - return { - ...parent, - // add the specific handlers for this situation - loadPreviousPage: handlers.loadPreviousPage, - } - } -} - export class FragmentStoreOffset< _Data extends GraphQLObject, _Input extends Record diff --git a/packages/houdini-svelte/src/runtime/stores/pagination/index.ts b/packages/houdini-svelte/src/runtime/stores/pagination/index.ts index 5dc7dd1af..f40e9eee2 100644 --- a/packages/houdini-svelte/src/runtime/stores/pagination/index.ts +++ b/packages/houdini-svelte/src/runtime/stores/pagination/index.ts @@ -1,7 +1,2 @@ -export { - FragmentStoreBackwardCursor, - FragmentStoreForwardCursor, - FragmentStoreOffset, -} from './fragment' - -export { QueryStoreBackwardCursor, QueryStoreForwardCursor, QueryStoreOffset } from './query' +export { FragmentStoreCursor, FragmentStoreOffset } from './fragment' +export { QueryStoreCursor, QueryStoreOffset } from './query' diff --git a/packages/houdini-svelte/src/runtime/stores/pagination/query.ts b/packages/houdini-svelte/src/runtime/stores/pagination/query.ts index 96a6ddbcb..7b353c367 100644 --- a/packages/houdini-svelte/src/runtime/stores/pagination/query.ts +++ b/packages/houdini-svelte/src/runtime/stores/pagination/query.ts @@ -24,14 +24,14 @@ export type CursorStoreResult<_Data extends GraphQLObject, _Input extends {}> = > & { pageInfo: PageInfo } // both cursor paginated stores add a page info to their subscribe -class CursorPaginatedStore<_Data extends GraphQLObject, _Input extends {}> extends QueryStore< +export class QueryStoreCursor<_Data extends GraphQLObject, _Input extends {}> extends QueryStore< _Data, _Input > { // all paginated stores need to have a flag to distinguish from other query stores paginated = true - protected handlers: CursorHandlers<_Data, _Input> + #handlers: CursorHandlers<_Data, _Input> constructor(config: StoreConfig<_Data, _Input, QueryArtifact>) { super(config) @@ -41,7 +41,7 @@ class CursorPaginatedStore<_Data extends GraphQLObject, _Input extends {}> exten artifact: this.artifact, }) - this.handlers = cursorHandlers<_Data, _Input>({ + this.#handlers = cursorHandlers<_Data, _Input>({ artifact: this.artifact, observer: this.observer, storeName: this.name, @@ -65,7 +65,7 @@ class CursorPaginatedStore<_Data extends GraphQLObject, _Input extends {}> exten fetch(params?: ClientFetchParams<_Data, _Input>): Promise> fetch(params?: QueryStoreFetchParams<_Data, _Input>): Promise> async fetch(args?: QueryStoreFetchParams<_Data, _Input>): Promise> { - return this.handlers!.fetch.call(this, args) + return this.#handlers!.fetch.call(this, args) } extraFields(): { pageInfo: PageInfo } { @@ -79,7 +79,7 @@ class CursorPaginatedStore<_Data extends GraphQLObject, _Input extends {}> exten invalidate?: ((value?: CursorStoreResult<_Data, _Input> | undefined) => void) | undefined ): () => void { const combined = derived( - [{ subscribe: super.subscribe.bind(this) }, this.handlers.pageInfo], + [{ subscribe: super.subscribe.bind(this) }, this.#handlers.pageInfo], ([$parent, $pageInfo]) => ({ // @ts-ignore ...$parent, @@ -91,28 +91,6 @@ class CursorPaginatedStore<_Data extends GraphQLObject, _Input extends {}> exten } } -// QueryStoreForwardCursor adds loadNextPage to CursorPaginatedQueryStore -export class QueryStoreForwardCursor< - _Data extends GraphQLObject, - _Input extends {} -> extends CursorPaginatedStore<_Data, _Input> { - async loadNextPage(args?: Parameters['loadNextPage']>[0]) { - return this.handlers.loadNextPage(args) - } -} - -// QueryStoreBackwardCursor adds loadPreviousPage to CursorPaginatedQueryStore -export class QueryStoreBackwardCursor< - _Data extends GraphQLObject, - _Input extends {} -> extends CursorPaginatedStore<_Data, _Input> { - async loadPreviousPage( - args?: Parameters>['loadPreviousPage']>[0] - ) { - return this.handlers.loadPreviousPage(args) - } -} - export class QueryStoreOffset<_Data extends GraphQLObject, _Input extends {}> extends QueryStore< _Data, _Input diff --git a/packages/houdini/src/codegen/generators/artifacts/artifacts.test.ts b/packages/houdini/src/codegen/generators/artifacts/artifacts.test.ts index 712b31c95..b08df6178 100644 --- a/packages/houdini/src/codegen/generators/artifacts/artifacts.test.ts +++ b/packages/houdini/src/codegen/generators/artifacts/artifacts.test.ts @@ -511,8 +511,7 @@ test('paginate over unions', async function () { "pageSize": 10, "embedded": false, "targetType": "Query", - "paginated": true, - "direction": "forward" + "paginated": true }, "raw": \`query TestQuery($first: Int = 10, $after: String) { @@ -3336,8 +3335,7 @@ describe('mutation artifacts', function () { "pageSize": 10, "embedded": false, "targetType": "Query", - "paginated": true, - "direction": "forward" + "paginated": true }, "raw": \`query TestQuery($first: Int = 10, $after: String) { diff --git a/packages/houdini/src/codegen/generators/artifacts/pagination.test.ts b/packages/houdini/src/codegen/generators/artifacts/pagination.test.ts index 196be5739..1e588d89f 100644 --- a/packages/houdini/src/codegen/generators/artifacts/pagination.test.ts +++ b/packages/houdini/src/codegen/generators/artifacts/pagination.test.ts @@ -39,8 +39,7 @@ test('pagination arguments stripped from key', async function () { "pageSize": 10, "embedded": true, "targetType": "Node", - "paginated": true, - "direction": "forward" + "paginated": true }, "raw": \`fragment PaginatedFragment on User { @@ -188,8 +187,7 @@ test('offset based pagination marks appropriate field', async function () { "pageSize": 10, "embedded": true, "targetType": "Node", - "paginated": true, - "direction": "forward" + "paginated": true }, "raw": \`fragment PaginatedFragment on User { @@ -275,8 +273,7 @@ test('cursor as scalar gets the right pagination query argument types', async fu "pageSize": 10, "embedded": false, "targetType": "Query", - "paginated": true, - "direction": "forward" + "paginated": true }, "raw": \`query ScalarPagination($first: Int = 10, $after: Cursor) { @@ -507,8 +504,7 @@ test("sibling aliases don't get marked", async function () { "pageSize": 10, "embedded": true, "targetType": "Node", - "paginated": true, - "direction": "forward" + "paginated": true }, "raw": \`fragment PaginatedFragment on User { diff --git a/packages/houdini/src/codegen/transforms/paginate.test.ts b/packages/houdini/src/codegen/transforms/paginate.test.ts index 4c5d7e1dc..5dfb6e30c 100644 --- a/packages/houdini/src/codegen/transforms/paginate.test.ts +++ b/packages/houdini/src/codegen/transforms/paginate.test.ts @@ -55,8 +55,7 @@ test('adds pagination info to full', async function () { "pageSize": 10, "embedded": false, "targetType": "Query", - "paginated": true, - "direction": "forward" + "paginated": true } `) }) @@ -92,8 +91,7 @@ test('paginated fragments on node pull data from one field deeper', async functi "pageSize": 10, "embedded": true, "targetType": "Node", - "paginated": true, - "direction": "forward" + "paginated": true } `) }) @@ -424,8 +422,7 @@ test('embeds node pagination query as a separate document', async function () { "pageSize": 10, "embedded": true, "targetType": "Node", - "paginated": true, - "direction": "forward" + "paginated": true }, "raw": \`query UserFriends_Pagination_Query($first: Int = 10, $after: String, $id: ID!) { @@ -713,8 +710,7 @@ test('embeds custom pagination query as a separate document', async function () "pageSize": 10, "embedded": true, "targetType": "Ghost", - "paginated": true, - "direction": "forward" + "paginated": true }, "raw": \`query UserGhost_Pagination_Query($first: Int = 10, $after: String, $name: String!, $aka: String!) { @@ -1261,8 +1257,7 @@ test('refetch specification with backwards pagination', async function () { "pageSize": 10, "embedded": false, "targetType": "Query", - "paginated": true, - "direction": "backwards" + "paginated": true } `) }) @@ -1299,7 +1294,6 @@ test('refetch entry with initial backwards', async function () { "embedded": false, "targetType": "Query", "paginated": true, - "direction": "backwards", "start": "1234" } `) @@ -1337,7 +1331,6 @@ test('refetch entry with initial forwards', async function () { "embedded": false, "targetType": "Query", "paginated": true, - "direction": "forward", "start": "1234" } `) @@ -1378,7 +1371,6 @@ test('generated query has same refetch spec', async function () { "embedded": false, "targetType": "Query", "paginated": true, - "direction": "forward", "start": "1234" }, @@ -1528,8 +1520,7 @@ test('refetch specification with offset pagination', async function () { "pageSize": 10, "embedded": false, "targetType": "Query", - "paginated": true, - "direction": "forward" + "paginated": true } `) }) @@ -1562,7 +1553,6 @@ test('refetch specification with initial offset', async function () { "embedded": false, "targetType": "Query", "paginated": true, - "direction": "forward", "start": 10 } `) From 3a17847c9f7280580d223e548401077a0a34d1f1 Mon Sep 17 00:00:00 2001 From: Alec Aivazis Date: Mon, 23 Jan 2023 19:04:39 -0800 Subject: [PATCH 03/26] fix build errors --- .../houdini-svelte/src/plugin/codegen/stores/fragment.ts | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/houdini-svelte/src/plugin/codegen/stores/fragment.ts b/packages/houdini-svelte/src/plugin/codegen/stores/fragment.ts index df14cd278..4efac83d9 100644 --- a/packages/houdini-svelte/src/plugin/codegen/stores/fragment.ts +++ b/packages/houdini-svelte/src/plugin/codegen/stores/fragment.ts @@ -18,10 +18,7 @@ export async function fragmentStore( // in order to build the store, we need to know what class we're going to import from let which: keyof Required['customStores'] = 'fragment' if (paginationMethod === 'cursor') { - which = - doc.refetch?.direction === 'forward' - ? 'fragmentForwardsCursor' - : 'fragmentBackwardsCursor' + which = 'fragmentCursor' } else if (paginationMethod === 'offset') { which = 'fragmentOffset' } From eed1ff5bbffaec45e05fe8e09d1f6b52e892450a Mon Sep 17 00:00:00 2001 From: Alec Aivazis Date: Mon, 23 Jan 2023 19:11:08 -0800 Subject: [PATCH 04/26] add missing methods to query store --- .../src/routes/pagination/query/offset/+page.svelte | 6 +++--- .../src/runtime/stores/pagination/query.ts | 12 ++++++++---- packages/houdini/src/runtime/client/plugins/query.ts | 1 - 3 files changed, 11 insertions(+), 8 deletions(-) diff --git a/e2e/sveltekit/src/routes/pagination/query/offset/+page.svelte b/e2e/sveltekit/src/routes/pagination/query/offset/+page.svelte index f7463a4a9..56c964012 100644 --- a/e2e/sveltekit/src/routes/pagination/query/offset/+page.svelte +++ b/e2e/sveltekit/src/routes/pagination/query/offset/+page.svelte @@ -1,13 +1,13 @@
diff --git a/packages/houdini-svelte/src/runtime/stores/pagination/query.ts b/packages/houdini-svelte/src/runtime/stores/pagination/query.ts index 7b353c367..a2691b2eb 100644 --- a/packages/houdini-svelte/src/runtime/stores/pagination/query.ts +++ b/packages/houdini-svelte/src/runtime/stores/pagination/query.ts @@ -68,10 +68,14 @@ export class QueryStoreCursor<_Data extends GraphQLObject, _Input extends {}> ex return this.#handlers!.fetch.call(this, args) } - extraFields(): { pageInfo: PageInfo } { - return { - pageInfo: nullPageInfo(), - } + async loadPreviousPage( + args?: Parameters>['loadPreviousPage']>[0] + ) { + return this.#handlers.loadPreviousPage(args) + } + + async loadNextPage(args?: Parameters['loadNextPage']>[0]) { + return this.#handlers.loadNextPage(args) } subscribe( diff --git a/packages/houdini/src/runtime/client/plugins/query.ts b/packages/houdini/src/runtime/client/plugins/query.ts index fd88b2e46..2474fff4e 100644 --- a/packages/houdini/src/runtime/client/plugins/query.ts +++ b/packages/houdini/src/runtime/client/plugins/query.ts @@ -43,7 +43,6 @@ export const queryPlugin: ClientPlugin = documentPlugin(ArtifactKind.Query, func selection: ctx.artifact.selection, variables: () => lastVariables, set: (newValue) => { - console.log('setting from cache update') resolve(ctx, { data: newValue, errors: null, From add31a5ed2fb1257b7c68feb2b773ad97dda971d Mon Sep 17 00:00:00 2001 From: Alec Aivazis Date: Mon, 23 Jan 2023 19:58:56 -0800 Subject: [PATCH 05/26] add e2e test --- e2e/_api/graphql.mjs | 1 + e2e/sveltekit/src/lib/utils/routes.ts | 1 + .../query/bidirectional-cursor/+page.svelte | 33 ++++++++ .../query/bidirectional-cursor/spec.ts | 75 +++++++++++++++++++ 4 files changed, 110 insertions(+) create mode 100644 e2e/sveltekit/src/routes/pagination/query/bidirectional-cursor/+page.svelte create mode 100644 e2e/sveltekit/src/routes/pagination/query/bidirectional-cursor/spec.ts diff --git a/e2e/_api/graphql.mjs b/e2e/_api/graphql.mjs index d81c6e7e2..19541fcc9 100644 --- a/e2e/_api/graphql.mjs +++ b/e2e/_api/graphql.mjs @@ -116,6 +116,7 @@ export const resolvers = { throw new GraphQLYogaError('No authorization found', { code: 403 }) }, usersConnection(_, args) { + console.log(args) return connectionFromArray(getSnapshot(args.snapshot), args) }, user: async (_, args) => { diff --git a/e2e/sveltekit/src/lib/utils/routes.ts b/e2e/sveltekit/src/lib/utils/routes.ts index 36774c8b2..c90d76427 100644 --- a/e2e/sveltekit/src/lib/utils/routes.ts +++ b/e2e/sveltekit/src/lib/utils/routes.ts @@ -63,6 +63,7 @@ export const routes = { Pagination_query_forward_cursor: '/pagination/query/forward-cursor', Pagination_query_backwards_cursor: '/pagination/query/backwards-cursor', + Pagination_query_bidirectional_cursor: '/pagination/query/bidirectional-cursor', Pagination_query_offset: '/pagination/query/offset', Pagination_query_offset_variable: '/pagination/query/offset-variable', diff --git a/e2e/sveltekit/src/routes/pagination/query/bidirectional-cursor/+page.svelte b/e2e/sveltekit/src/routes/pagination/query/bidirectional-cursor/+page.svelte new file mode 100644 index 000000000..32b1135af --- /dev/null +++ b/e2e/sveltekit/src/routes/pagination/query/bidirectional-cursor/+page.svelte @@ -0,0 +1,33 @@ + + +
+ {$result.data?.usersConnection.edges.map(({ node }) => node?.name).join(', ')} +
+ +
+ {JSON.stringify($result.pageInfo)} +
+ + + + diff --git a/e2e/sveltekit/src/routes/pagination/query/bidirectional-cursor/spec.ts b/e2e/sveltekit/src/routes/pagination/query/bidirectional-cursor/spec.ts new file mode 100644 index 000000000..b439facef --- /dev/null +++ b/e2e/sveltekit/src/routes/pagination/query/bidirectional-cursor/spec.ts @@ -0,0 +1,75 @@ +import { expect, test } from '@playwright/test'; +import { routes } from '../../../../lib/utils/routes.js'; +import { + expect_1_gql, + expect_0_gql, + expectToBe, + expectToContain, + goto +} from '../../../../lib/utils/testsHelper.js'; + +test.describe('forwards cursor paginatedQuery', () => { + test('loadNextPage', async ({ page }) => { + await goto(page, routes.Pagination_query_forward_cursor); + + await expectToBe(page, 'Bruce Willis, Samuel Jackson'); + + // wait for the api response + await expect_1_gql(page, 'button[id=next]'); + + // // make sure we got the new content + await expectToBe(page, 'Bruce Willis, Samuel Jackson, Morgan Freeman, Tom Hanks'); + }); + + test('refetch', async ({ page }) => { + await goto(page, routes.Pagination_query_forward_cursor); + + // wait for the api response + let response = await expect_1_gql(page, 'button[id=next]'); + expect(response).not.toContain( + '"name":"Bruce Willis","id":"pagination-query-forwards-cursor:1"' + ); + expect(response).not.toContain( + '"name":"Samuel Jackson","id":"pagination-query-forwards-cursor:2"' + ); + expect(response).toContain('"name":"Morgan Freeman","id":"pagination-query-forwards-cursor:3"'); + expect(response).toContain('"name":"Tom Hanks","id":"pagination-query-forwards-cursor:4"'); + + // wait for the api response + response = await expect_1_gql(page, 'button[id=refetch]'); + + expect(response).toContain('"name":"Bruce Willis","id":"pagination-query-forwards-cursor:1"'); + expect(response).toContain('"name":"Samuel Jackson","id":"pagination-query-forwards-cursor:2"'); + expect(response).toContain('"name":"Morgan Freeman","id":"pagination-query-forwards-cursor:3"'); + expect(response).toContain('"name":"Tom Hanks","id":"pagination-query-forwards-cursor:4"'); + }); + + test('page info tracks connection state', async ({ page }) => { + await goto(page, routes.Pagination_query_forward_cursor); + + const data = [ + 'Bruce Willis, Samuel Jackson, Morgan Freeman, Tom Hanks', + 'Bruce Willis, Samuel Jackson, Morgan Freeman, Tom Hanks, Will Smith, Harrison Ford', + 'Bruce Willis, Samuel Jackson, Morgan Freeman, Tom Hanks, Will Smith, Harrison Ford, Eddie Murphy, Clint Eastwood' + ]; + + // load the next 3 pages + for (let i = 0; i < 3; i++) { + // check the page info to know if we will click on next? + await expectToContain(page, `"hasNextPage":true`); + + // wait for the request to resolve + await expect_1_gql(page, 'button[id=next]'); + + // check the data + await expectToBe(page, data[i]); + } + + // make sure we have all of the data loaded + await expectToBe(page, data[2]); + + await expectToContain(page, `"hasNextPage":false`); + + await expect_0_gql(page, 'button[id=next]'); + }); +}); From 32ddc5e275199054366fb9f79b5c65150058149d Mon Sep 17 00:00:00 2001 From: Alec Aivazis Date: Mon, 23 Jan 2023 20:10:38 -0800 Subject: [PATCH 06/26] fix initial args in bidirectional pagination test --- .../routes/pagination/query/bidirectional-cursor/+page.svelte | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/e2e/sveltekit/src/routes/pagination/query/bidirectional-cursor/+page.svelte b/e2e/sveltekit/src/routes/pagination/query/bidirectional-cursor/+page.svelte index 32b1135af..fb59fc360 100644 --- a/e2e/sveltekit/src/routes/pagination/query/bidirectional-cursor/+page.svelte +++ b/e2e/sveltekit/src/routes/pagination/query/bidirectional-cursor/+page.svelte @@ -4,9 +4,9 @@ const result = graphql(` query BidirectionalCursorPaginationQuery @load { usersConnection( - after: "YXJyYXljb25uZWN0aW9uOjE" + after: "YXJyYXljb25uZWN0aW9uOjE=" first: 2 - snapshot: "pagination-query-forwards-cursor" + snapshot: "pagination-query-bdiriectional-cursor" ) @paginate { edges { node { From f2242b64901e080e6f33948c3fb4e5b0ac96f126 Mon Sep 17 00:00:00 2001 From: Alec Aivazis Date: Mon, 23 Jan 2023 20:12:33 -0800 Subject: [PATCH 07/26] add previous button --- .../routes/pagination/query/bidirectional-cursor/+page.svelte | 1 + 1 file changed, 1 insertion(+) diff --git a/e2e/sveltekit/src/routes/pagination/query/bidirectional-cursor/+page.svelte b/e2e/sveltekit/src/routes/pagination/query/bidirectional-cursor/+page.svelte index fb59fc360..004ca018b 100644 --- a/e2e/sveltekit/src/routes/pagination/query/bidirectional-cursor/+page.svelte +++ b/e2e/sveltekit/src/routes/pagination/query/bidirectional-cursor/+page.svelte @@ -26,6 +26,7 @@ {JSON.stringify($result.pageInfo)}
+ + + + + diff --git a/e2e/sveltekit/src/routes/pagination/fragment/bidirectional-cursor/spec.ts b/e2e/sveltekit/src/routes/pagination/fragment/bidirectional-cursor/spec.ts new file mode 100644 index 000000000..966beca3a --- /dev/null +++ b/e2e/sveltekit/src/routes/pagination/fragment/bidirectional-cursor/spec.ts @@ -0,0 +1,113 @@ +import { expect, test } from '@playwright/test'; +import { routes } from '../../../../lib/utils/routes.js'; +import { + expect_1_gql, + expect_0_gql, + expectToBe, + expectToContain, + goto +} from '../../../../lib/utils/testsHelper.js'; + +test.describe('bidirectional cursor paginated fragment', () => { + test('backwards and then forwards', async ({ page }) => { + await goto(page, routes.Pagination_fragment_bidirectional_cursor); + + await expectToBe(page, 'Morgan Freeman, Tom Hanks'); + + /// Click on the previous button + + // load the previous page and wait for the response + await expect_1_gql(page, 'button[id=previous]'); + + // make sure we got the new content + await expectToBe(page, 'Bruce Willis, Samuel Jackson, Morgan Freeman, Tom Hanks'); + + // there should be a next page + await expectToContain(page, `"hasNextPage":true`); + // there should be no previous page + await expectToContain(page, `"hasPreviousPage":false`); + + /// Click on the next button + + // load the next page and wait for the response + await expect_1_gql(page, 'button[id=next]'); + + // there should be no previous page + await expectToContain(page, `"hasPreviousPage":false`); + // there should be a next page + await expectToContain(page, `"hasNextPage":true`); + + // make sure we got the new content + await expectToBe( + page, + 'Bruce Willis, Samuel Jackson, Morgan Freeman, Tom Hanks, Will Smith, Harrison Ford' + ); + + /// Click on the next button + + // load the next page and wait for the response + await expect_1_gql(page, 'button[id=next]'); + + // there should be no previous page + await expectToContain(page, `"hasPreviousPage":false`); + // there should be a next page + await expectToContain(page, `"hasNextPage":false`); + + // make sure we got the new content + await expectToBe( + page, + 'Bruce Willis, Samuel Jackson, Morgan Freeman, Tom Hanks, Will Smith, Harrison Ford, Eddie Murphy, Clint Eastwood' + ); + }); + + test('forwards then backwards and then forwards again', async ({ page }) => { + await goto(page, routes.Pagination_fragment_bidirectional_cursor); + + await expectToBe(page, 'Morgan Freeman, Tom Hanks'); + + /// Click on the next button + + // load the next page and wait for the response + await expect_1_gql(page, 'button[id=next]'); + + // there should be no previous page + await expectToContain(page, `"hasPreviousPage":true`); + // there should be a next page + await expectToContain(page, `"hasNextPage":true`); + + // make sure we got the new content + await expectToBe(page, 'Morgan Freeman, Tom Hanks, Will Smith, Harrison Ford'); + + /// Click on the previous button + + // load the previous page and wait for the response + await expect_1_gql(page, 'button[id=previous]'); + + // make sure we got the new content + await expectToBe( + page, + 'Bruce Willis, Samuel Jackson, Morgan Freeman, Tom Hanks, Will Smith, Harrison Ford' + ); + + // there should be a next page + await expectToContain(page, `"hasNextPage":true`); + // there should be no previous page + await expectToContain(page, `"hasPreviousPage":false`); + + /// Click on the next button + + // load the next page and wait for the response + await expect_1_gql(page, 'button[id=next]'); + + // there should be no previous page + await expectToContain(page, `"hasPreviousPage":false`); + // there should be a next page + await expectToContain(page, `"hasNextPage":false`); + + // make sure we got the new content + await expectToBe( + page, + 'Bruce Willis, Samuel Jackson, Morgan Freeman, Tom Hanks, Will Smith, Harrison Ford, Eddie Murphy, Clint Eastwood' + ); + }); +}); diff --git a/e2e/sveltekit/src/routes/pagination/query/bidirectional-cursor/+page.svelte b/e2e/sveltekit/src/routes/pagination/query/bidirectional-cursor/+page.svelte index 3d1acbdcd..fda0172d1 100644 --- a/e2e/sveltekit/src/routes/pagination/query/bidirectional-cursor/+page.svelte +++ b/e2e/sveltekit/src/routes/pagination/query/bidirectional-cursor/+page.svelte @@ -1,5 +1,5 @@