From 36a68591a056be3afa2c396cc7aee9d9c2ac0ac3 Mon Sep 17 00:00:00 2001 From: Jacob Cable <32874567+cabljac@users.noreply.github.com> Date: Mon, 30 May 2022 11:04:13 +0100 Subject: [PATCH] feat(useSubscription): add `onData` option (#34) --- .github/ISSUE_TEMPLATE/bug_report.md | 15 ++++++++------- .github/ISSUE_TEMPLATE/feature_request.md | 1 - .gitpod.yml | 4 ++-- CHANGELOG.md | 12 ++++-------- CODE_OF_CONDUCT.md | 22 +++++++++++----------- src/__tests__/use-subscription.spec.tsx | 22 ++++++++++++++++++++++ src/use-subscription.ts | 13 +++++++++---- 7 files changed, 56 insertions(+), 33 deletions(-) diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md index 793d5dd..bed75c0 100644 --- a/.github/ISSUE_TEMPLATE/bug_report.md +++ b/.github/ISSUE_TEMPLATE/bug_report.md @@ -4,7 +4,6 @@ about: Create a report to help us improve title: '' labels: '' assignees: '' - --- **Describe the bug** @@ -12,6 +11,7 @@ A clear and concise description of what the bug is. **To Reproduce** Steps to reproduce the behavior: + 1. Go to '...' 2. Click on '....' 3. Scroll down to '....' @@ -24,12 +24,13 @@ A clear and concise description of what you expected to happen. If applicable, add screenshots to help explain your problem. **Context (please complete the following information):** - - Node version: [e.g. 14.17] - - React Query version: [e.g. 3.31.0] - - RxJs version: [e.g. 7.4.0] - - OS: [e.g. iOS] - - Browser [e.g. chrome, safari, any] - - Version [e.g. 22] + +- Node version: [e.g. 14.17] +- React Query version: [e.g. 3.31.0] +- RxJs version: [e.g. 7.4.0] +- OS: [e.g. iOS] +- Browser [e.g. chrome, safari, any] +- Version [e.g. 22] **Additional context** Add any other context about the problem here. diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md index bbcbbe7..2f28cea 100644 --- a/.github/ISSUE_TEMPLATE/feature_request.md +++ b/.github/ISSUE_TEMPLATE/feature_request.md @@ -4,7 +4,6 @@ about: Suggest an idea for this project title: '' labels: '' assignees: '' - --- **Is your feature request related to a problem? Please describe.** diff --git a/.gitpod.yml b/.gitpod.yml index 3f598f8..8095f37 100644 --- a/.gitpod.yml +++ b/.gitpod.yml @@ -7,5 +7,5 @@ tasks: vscode: extensions: - - "esbenp.prettier-vscode" - - "dbaeumer.vscode-eslint" + - 'esbenp.prettier-vscode' + - 'dbaeumer.vscode-eslint' diff --git a/CHANGELOG.md b/CHANGELOG.md index d40fd61..4d29cab 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,27 +1,23 @@ ## [1.4.0](https://github.com/kaciakmaciak/react-query-subscription/compare/v1.3.0...v1.4.0) (2021-11-07) - ### ✨ Features -* **useSubscription:** add `onError` option ([c102b7c](https://github.com/kaciakmaciak/react-query-subscription/commit/c102b7c771d3d2a894767fab28b531e9d3cf4ab5)), closes [#29](https://github.com/kaciakmaciak/react-query-subscription/issues/29) +- **useSubscription:** add `onError` option ([c102b7c](https://github.com/kaciakmaciak/react-query-subscription/commit/c102b7c771d3d2a894767fab28b531e9d3cf4ab5)), closes [#29](https://github.com/kaciakmaciak/react-query-subscription/issues/29) ## [1.3.0](https://github.com/kaciakmaciak/react-query-subscription/compare/v1.2.0...v1.3.0) (2021-11-02) - ### ✨ Features -* **useSubscription:** add `retryDelay` option ([2648116](https://github.com/kaciakmaciak/react-query-subscription/commit/26481160b41aebab807798663834df5b16596954)), closes [#24](https://github.com/kaciakmaciak/react-query-subscription/issues/24) +- **useSubscription:** add `retryDelay` option ([2648116](https://github.com/kaciakmaciak/react-query-subscription/commit/26481160b41aebab807798663834df5b16596954)), closes [#24](https://github.com/kaciakmaciak/react-query-subscription/issues/24) ## [1.2.0](https://github.com/kaciakmaciak/react-query-subscription/compare/v1.1.0...v1.2.0) (2021-10-31) - ### ✨ Features -* **types:** export `UseSubscriptionOptions` and `EventSourceOptions` types ([3c497d8](https://github.com/kaciakmaciak/react-query-subscription/commit/3c497d8285784f0befa286b00edc1bbe46bc34b6)) +- **types:** export `UseSubscriptionOptions` and `EventSourceOptions` types ([3c497d8](https://github.com/kaciakmaciak/react-query-subscription/commit/3c497d8285784f0befa286b00edc1bbe46bc34b6)) ## [1.1.0](https://github.com/kaciakmaciak/react-query-subscription/compare/v1.0.0...v1.1.0) (2021-10-30) - ### ✨ Features -* **helpers:** add `fromEventSource` and `eventSource$` helpers ([38370dc](https://github.com/kaciakmaciak/react-query-subscription/commit/38370dc1b11435c86167db3ae2a1f4f0ea17d023)), closes [#13](https://github.com/kaciakmaciak/react-query-subscription/issues/13) +- **helpers:** add `fromEventSource` and `eventSource$` helpers ([38370dc](https://github.com/kaciakmaciak/react-query-subscription/commit/38370dc1b11435c86167db3ae2a1f4f0ea17d023)), closes [#13](https://github.com/kaciakmaciak/react-query-subscription/issues/13) diff --git a/CODE_OF_CONDUCT.md b/CODE_OF_CONDUCT.md index ca104f0..b59e7a6 100644 --- a/CODE_OF_CONDUCT.md +++ b/CODE_OF_CONDUCT.md @@ -17,23 +17,23 @@ diverse, inclusive, and healthy community. Examples of behavior that contributes to a positive environment for our community include: -* Demonstrating empathy and kindness toward other people -* Being respectful of differing opinions, viewpoints, and experiences -* Giving and gracefully accepting constructive feedback -* Accepting responsibility and apologizing to those affected by our mistakes, +- Demonstrating empathy and kindness toward other people +- Being respectful of differing opinions, viewpoints, and experiences +- Giving and gracefully accepting constructive feedback +- Accepting responsibility and apologizing to those affected by our mistakes, and learning from the experience -* Focusing on what is best not just for us as individuals, but for the +- Focusing on what is best not just for us as individuals, but for the overall community Examples of unacceptable behavior include: -* The use of sexualized language or imagery, and sexual attention or +- The use of sexualized language or imagery, and sexual attention or advances of any kind -* Trolling, insulting or derogatory comments, and personal or political attacks -* Public or private harassment -* Publishing others' private information, such as a physical or email +- Trolling, insulting or derogatory comments, and personal or political attacks +- Public or private harassment +- Publishing others' private information, such as a physical or email address, without their explicit permission -* Other conduct which could reasonably be considered inappropriate in a +- Other conduct which could reasonably be considered inappropriate in a professional setting ## Enforcement Responsibilities @@ -106,7 +106,7 @@ Violating these terms may lead to a permanent ban. ### 4. Permanent Ban **Community Impact**: Demonstrating a pattern of violation of community -standards, including sustained inappropriate behavior, harassment of an +standards, including sustained inappropriate behavior, harassment of an individual, or aggression toward or disparagement of classes of individuals. **Consequence**: A permanent ban from any sort of public interaction within diff --git a/src/__tests__/use-subscription.spec.tsx b/src/__tests__/use-subscription.spec.tsx index 1a40616..4440335 100644 --- a/src/__tests__/use-subscription.spec.tsx +++ b/src/__tests__/use-subscription.spec.tsx @@ -76,6 +76,28 @@ describe('useSubscription', () => { expect(result.current.data).toBe(1); }); + test('subscription data', async () => { + const onData = jest.fn(); + const { result, waitForNextUpdate } = renderHook( + () => + useSubscription(testSubscriptionKey, testSubscriptionFn, { + onData, + }), + { wrapper: Wrapper } + ); + expect(result.current.data).toBeUndefined(); + + await waitForNextUpdate(); + expect(result.current.data).toBe(0); + expect(onData).toHaveBeenCalledTimes(1); + expect(onData).toHaveBeenCalledWith(0); + + await waitForNextUpdate(); + expect(result.current.data).toBe(1); + expect(onData).toHaveBeenCalledTimes(2); + expect(onData).toHaveBeenCalledWith(1); + }); + test('subscription error', async () => { const testErrorSubscriptionFn = () => { throw new Error('Test Error'); diff --git a/src/use-subscription.ts b/src/use-subscription.ts index 87db38e..1d03fc5 100644 --- a/src/use-subscription.ts +++ b/src/use-subscription.ts @@ -60,6 +60,10 @@ export interface UseSubscriptionOptions< placeholderData?: | TSubscriptionFnData | PlaceholderDataFunction; + /** + * This function will fire any time the subscription successfully fetches new data or the cache is updated via setQueryData. + */ + onData?: (data: TData) => void; } export type UseSubscriptionResult< @@ -125,15 +129,15 @@ export function useSubscription< throw failRefetchWith.current; } + type Result = Promise & { cancel?: () => void }; + const stream$ = subscriptionFn().pipe(share()); - const result = firstValueFrom(stream$); + const result: Result = firstValueFrom(stream$); // Fixes scenario when component unmounts before first emit. // If we do not invalidate the query, the hook will never re-subscribe, // as data are otherwise marked as fresh. - // @todo: any - // eslint-disable-next-line @typescript-eslint/no-explicit-any - (result as any).cancel = () => { + result.cancel = () => { queryClient.invalidateQueries(queryKey); }; @@ -181,6 +185,7 @@ export function useSubscription< refetchOnMount: true, refetchOnWindowFocus: false, refetchOnReconnect: false, + onSuccess: options.onData, onError: (error: TError) => { // Once the error has been thrown, and a query result created (with error) // cleanup the `failRefetchWith`.