From d1098bee4f2d37f67c90d17f9e5fa2395b31aaea Mon Sep 17 00:00:00 2001 From: Leonardo Santos Date: Wed, 14 Aug 2024 11:12:58 -0300 Subject: [PATCH] feat: add updateQuery to useQuery (#1552) --- .../src/components/UpdateQuery.vue | 141 ++++++++++++++++++ .../test-e2e-composable-vue3/src/router.ts | 4 + .../tests/e2e/specs/updateQuery.cy.ts | 30 ++++ .../vue-apollo-composable/src/useQuery.ts | 10 ++ 4 files changed, 185 insertions(+) create mode 100644 packages/test-e2e-composable-vue3/src/components/UpdateQuery.vue create mode 100644 packages/test-e2e-composable-vue3/tests/e2e/specs/updateQuery.cy.ts diff --git a/packages/test-e2e-composable-vue3/src/components/UpdateQuery.vue b/packages/test-e2e-composable-vue3/src/components/UpdateQuery.vue new file mode 100644 index 00000000..3fc19dde --- /dev/null +++ b/packages/test-e2e-composable-vue3/src/components/UpdateQuery.vue @@ -0,0 +1,141 @@ + + + diff --git a/packages/test-e2e-composable-vue3/src/router.ts b/packages/test-e2e-composable-vue3/src/router.ts index 0ac28b7d..bd92a95e 100644 --- a/packages/test-e2e-composable-vue3/src/router.ts +++ b/packages/test-e2e-composable-vue3/src/router.ts @@ -93,5 +93,9 @@ export const router = createRouter({ layout: 'blank', }, }, + { + path: '/update-query', + component: () => import('./components/UpdateQuery.vue'), + }, ], }) diff --git a/packages/test-e2e-composable-vue3/tests/e2e/specs/updateQuery.cy.ts b/packages/test-e2e-composable-vue3/tests/e2e/specs/updateQuery.cy.ts new file mode 100644 index 00000000..ed7ee75d --- /dev/null +++ b/packages/test-e2e-composable-vue3/tests/e2e/specs/updateQuery.cy.ts @@ -0,0 +1,30 @@ +describe('updateQuery', () => { + beforeEach(() => { + cy.task('db:reset') + cy.visit('/update-query') + }) + + it('should add new message to cache using updateQuery', () => { + cy.get('.channel-btn').eq(0).click() + cy.get('.message-input').type('hello 1') + cy.get('.message').should('have.lengthOf', 0) + cy.get('.send-message-btn').click() + cy.get('.message').should('have.lengthOf', 1) + cy.get('.message-input').type('hello 2') + cy.get('.send-message-btn').click() + cy.get('.message').should('have.lengthOf', 2) + cy.contains('.message', 'hello 1') + cy.contains('.message', 'hello 2') + + cy.get('.channel-btn').eq(1).click() + cy.get('.message-input').type('hello 3') + cy.get('.message').should('have.lengthOf', 0) + cy.get('.send-message-btn').click() + cy.get('.message').should('have.lengthOf', 1) + cy.get('.message-input').type('hello 4') + cy.get('.send-message-btn').click() + cy.get('.message').should('have.lengthOf', 2) + cy.contains('.message', 'hello 3') + cy.contains('.message', 'hello 4') + }) +}) diff --git a/packages/vue-apollo-composable/src/useQuery.ts b/packages/vue-apollo-composable/src/useQuery.ts index d034740c..a56a3c73 100644 --- a/packages/vue-apollo-composable/src/useQuery.ts +++ b/packages/vue-apollo-composable/src/useQuery.ts @@ -81,6 +81,7 @@ export interface UseQueryReturn query: Ref | null | undefined> refetch: (variables?: TVariables) => Promise> | undefined fetchMore: (options: FetchMoreQueryOptions & FetchMoreOptions) => Promise> | undefined + updateQuery: (mapFn: (previousQueryResult: TResult, options: Pick, 'variables'>) => TResult) => void subscribeToMore: (options: SubscribeToMoreOptions | Ref> | ReactiveFunction>) => void onResult: (fn: (param: ApolloQueryResult, context: OnResultContext) => void) => { off: () => void @@ -534,6 +535,14 @@ export function useQueryImpl< } } + // Update Query + + function updateQuery (mapFn: (previousQueryResult: TResult, options: Pick, 'variables'>) => TResult) { + if (query.value) { + query.value.updateQuery(mapFn) + } + } + // Fetch more function fetchMore (options: FetchMoreQueryOptions & FetchMoreOptions) { @@ -637,6 +646,7 @@ export function useQueryImpl< refetch, fetchMore, subscribeToMore, + updateQuery, onResult: resultEvent.on, onError: errorEvent.on, }