From b5675e9718d4b5ba7ee899bdf8bcea10003d0176 Mon Sep 17 00:00:00 2001 From: Benjamin Adam Date: Thu, 7 Apr 2022 14:40:21 -0700 Subject: [PATCH 01/17] docs: Update links to course landing page (#3478) --- docs/src/components/LayoutDocs.js | 2 +- docs/src/components/PPPBanner.js | 2 +- docs/src/pages/index.js | 6 +++--- docs/src/pages/overview.md | 2 +- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/docs/src/components/LayoutDocs.js b/docs/src/components/LayoutDocs.js index 66a529d1d4..8a28952330 100644 --- a/docs/src/components/LayoutDocs.js +++ b/docs/src/components/LayoutDocs.js @@ -119,7 +119,7 @@ export const LayoutDocs = props => {

Fast track your learning and {' '} take the offical course ↗️ diff --git a/docs/src/components/PPPBanner.js b/docs/src/components/PPPBanner.js index febf2b7698..2cc616be1d 100644 --- a/docs/src/components/PPPBanner.js +++ b/docs/src/components/PPPBanner.js @@ -49,7 +49,7 @@ export function PPPBanner() { Course with code{' '} {data.coupon} diff --git a/docs/src/pages/index.js b/docs/src/pages/index.js index 579974df10..6485faeaad 100644 --- a/docs/src/pages/index.js +++ b/docs/src/pages/index.js @@ -74,7 +74,7 @@ const Home = ({ sponsors }) => {

Want to skip the docs?{' '} Take the offical course @@ -177,7 +177,7 @@ const Home = ({ sponsors }) => { @@ -375,7 +375,7 @@ const Home = ({ sponsors }) => {

- + Take the course
diff --git a/docs/src/pages/overview.md b/docs/src/pages/overview.md index 7196d4270e..2f8360abd4 100644 --- a/docs/src/pages/overview.md +++ b/docs/src/pages/overview.md @@ -84,5 +84,5 @@ function Example() { ## You talked me into it, so what now? -- Consider taking the official [React Query Course](https://ui.dev/checkout/react-query?from=tanstack) (or buying it for your whole team!) +- Consider taking the official [React Query Course](https://ui.dev/react-query?from=tanstack) (or buying it for your whole team!) - Learn React Query at your own pace with our amazingly thorough [Walkthrough Guide](../installation) and [API Reference](../reference/useQuery) From b992f897c4fdb19a02e8a96a774be3e35c1a3291 Mon Sep 17 00:00:00 2001 From: Tyler McGinnis Date: Fri, 8 Apr 2022 11:38:32 -0600 Subject: [PATCH 02/17] Update Learn link and sidebar (#3486) --- docs/src/components/LayoutDocs.js | 13 +++++++++---- docs/src/components/Nav.js | 2 +- 2 files changed, 10 insertions(+), 5 deletions(-) diff --git a/docs/src/components/LayoutDocs.js b/docs/src/components/LayoutDocs.js index 8a28952330..df5aa8857a 100644 --- a/docs/src/components/LayoutDocs.js +++ b/docs/src/components/LayoutDocs.js @@ -128,14 +128,19 @@ export const LayoutDocs = props => {

- Subscribe to Bytes + Subscribe to{' '} + + Bytes +

- The best JavaScript newsletter! Delivered every - Monday to over 76,000 devs. + Your weekly dose of JavaScript news. Delivered every + Monday to over 80,000 devs, for free.

-
diff --git a/docs/src/components/Nav.js b/docs/src/components/Nav.js index 740ca1625a..3e97fb3ddd 100644 --- a/docs/src/components/Nav.js +++ b/docs/src/components/Nav.js @@ -37,7 +37,7 @@ export const Nav = () => (
From 70e3d47d23c077ac2e8788f5595329e5c10c607d Mon Sep 17 00:00:00 2001 From: Satyajit Sahoo Date: Sat, 9 Apr 2022 14:29:51 +0200 Subject: [PATCH 03/17] docs: Improve readability of `useRefreshOnFocus` (#3465) --- docs/src/pages/react-native.md | 13 ++++++++----- 1 file changed, 8 insertions(+), 5 deletions(-) diff --git a/docs/src/pages/react-native.md b/docs/src/pages/react-native.md index e0e9f46e8a..ce814c4c74 100644 --- a/docs/src/pages/react-native.md +++ b/docs/src/pages/react-native.md @@ -55,16 +55,19 @@ import React from 'react' import { useFocusEffect } from '@react-navigation/native' export function useRefreshOnFocus(refetch: () => Promise) { - const enabledRef = React.useRef(false) + const firstTimeRef = React.useRef(true) useFocusEffect( React.useCallback(() => { - if (enabledRef.current) { - refetch() - } else { - enabledRef.current = true + if (firstTimeRef.current) { + firstTimeRef.current = false; + return; } + + refetch() }, [refetch]) ) } ``` + +In the above code, `refetch` is skipped the first time because `useFocusEffect` calls our callback on mount in addition to screen focus. From ec4ef9b7533c3bf0f7560fc5c811da337a0972c4 Mon Sep 17 00:00:00 2001 From: Artem Golubenko Date: Mon, 11 Apr 2022 22:17:57 +0300 Subject: [PATCH 04/17] docs: add a link to the v4 beta doc (#3496) add a link in README.md pointing to the v4 beta doc Co-authored-by: artem.golubenko --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 2f7f26e972..edd4ce5386 100644 --- a/README.md +++ b/README.md @@ -30,7 +30,8 @@ Enjoy this library? Try the entire [TanStack](https://tanstack.com)! [React Tabl ## Visit [react-query.tanstack.com](https://react-query.tanstack.com) for docs, guides, API and more! -Still on **React Query v2**? No problem! Check out the v2 docs here: https://react-query-v2.tanstack.com/. +Still on **React Query v2**? No problem! Check out the v2 docs here: https://react-query-v2.tanstack.com/.
+Would you like to try **React Query v4beta**? Check out the v4 beta docs here: https://react-query-beta.tanstack.com/. ## Quick Features - Transport/protocol/backend agnostic data fetching (REST, GraphQL, promises, whatever!) From 20c9838d398a4e4ba0268621048481270f56bd13 Mon Sep 17 00:00:00 2001 From: Niels de Bruin Date: Fri, 15 Apr 2022 13:27:35 +0200 Subject: [PATCH 05/17] docs: Fix typo on homepage (#3515) --- docs/src/pages/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/index.js b/docs/src/pages/index.js index 6485faeaad..6554a0178b 100644 --- a/docs/src/pages/index.js +++ b/docs/src/pages/index.js @@ -77,7 +77,7 @@ const Home = ({ sponsors }) => { href="https://ui.dev/react-query?from=tanstack" className="text-blue-600 font-semibold transition-colors duration-150 ease-out" > - Take the offical course + Take the official course

From 1ab13dc22efeb9270e38269efaa346e24e3fc0f6 Mon Sep 17 00:00:00 2001 From: Mohammad ali Ali panah <58308349+always-maap@users.noreply.github.com> Date: Sat, 16 Apr 2022 00:01:04 +0430 Subject: [PATCH 06/17] fix(devtools): adjust QueryKey height (#3497) --- src/devtools/devtools.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/devtools/devtools.tsx b/src/devtools/devtools.tsx index 00a226de10..e740a5e570 100644 --- a/src/devtools/devtools.tsx +++ b/src/devtools/devtools.tsx @@ -723,7 +723,7 @@ export const ReactQueryDevtoolsPanel = React.forwardRef< style={{ marginBottom: '.5em', display: 'flex', - alignItems: 'stretch', + alignItems: 'start', justifyContent: 'space-between', }} > From 0c667273125e5307ff148c0ce621b5d24950517f Mon Sep 17 00:00:00 2001 From: Dominik Dorfmeister Date: Sun, 17 Apr 2022 20:46:01 +0200 Subject: [PATCH 07/17] feat(react): add "support" for react18 (#3520) --- package.json | 2 +- src/react/Hydrate.tsx | 9 +++------ src/react/QueryClientProvider.tsx | 5 +++-- src/react/QueryErrorResetBoundary.tsx | 4 ++-- src/react/tests/utils.tsx | 5 ++++- 5 files changed, 13 insertions(+), 12 deletions(-) diff --git a/package.json b/package.json index 560a5dcec6..9215185f29 100644 --- a/package.json +++ b/package.json @@ -70,7 +70,7 @@ "match-sorter": "^6.0.2" }, "peerDependencies": { - "react": "^16.8.0 || ^17.0.0" + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" }, "peerDependenciesMeta": { "react-dom": { diff --git a/src/react/Hydrate.tsx b/src/react/Hydrate.tsx index 5221897403..5e5893e012 100644 --- a/src/react/Hydrate.tsx +++ b/src/react/Hydrate.tsx @@ -23,13 +23,10 @@ export function useHydrate(state: unknown, options?: HydrateOptions) { export interface HydrateProps { state?: unknown options?: HydrateOptions + children?: React.ReactNode } -export const Hydrate: React.FC = ({ - children, - options, - state, -}) => { +export const Hydrate = ({ children, options, state }: HydrateProps) => { useHydrate(state, options) - return children as React.ReactElement + return children as React.ReactElement } diff --git a/src/react/QueryClientProvider.tsx b/src/react/QueryClientProvider.tsx index e0ea8baa52..d5e590f7d1 100644 --- a/src/react/QueryClientProvider.tsx +++ b/src/react/QueryClientProvider.tsx @@ -44,13 +44,14 @@ export const useQueryClient = () => { export interface QueryClientProviderProps { client: QueryClient contextSharing?: boolean + children?: React.ReactNode } -export const QueryClientProvider: React.FC = ({ +export const QueryClientProvider = ({ client, contextSharing = false, children, -}) => { +}: QueryClientProviderProps): JSX.Element => { React.useEffect(() => { client.mount() return () => { diff --git a/src/react/QueryErrorResetBoundary.tsx b/src/react/QueryErrorResetBoundary.tsx index 284de240e2..b380e275bd 100644 --- a/src/react/QueryErrorResetBoundary.tsx +++ b/src/react/QueryErrorResetBoundary.tsx @@ -38,9 +38,9 @@ export interface QueryErrorResetBoundaryProps { | React.ReactNode } -export const QueryErrorResetBoundary: React.FC = ({ +export const QueryErrorResetBoundary = ({ children, -}) => { +}: QueryErrorResetBoundaryProps) => { const value = React.useMemo(() => createValue(), []) return ( diff --git a/src/react/tests/utils.tsx b/src/react/tests/utils.tsx index 314c3183be..26bc71ac76 100644 --- a/src/react/tests/utils.tsx +++ b/src/react/tests/utils.tsx @@ -67,9 +67,12 @@ export const expectType = (_: T): void => undefined export const expectTypeNotAny = (_: 0 extends 1 & T ? never : T): void => undefined -export const Blink: React.FC<{ duration: number }> = ({ +export const Blink = ({ duration, children, +}: { + duration: number + children: React.ReactNode }) => { const [shouldShow, setShouldShow] = React.useState(true) From b7a07c2b6f3c5d0f72c5da17b5140bf9957471b7 Mon Sep 17 00:00:00 2001 From: New Future Date: Thu, 21 Apr 2022 20:18:47 +0800 Subject: [PATCH 08/17] feat: add nonce for devtools style tag (#3506) --- src/devtools/devtools.tsx | 19 ++++++++++++++++++- src/devtools/tests/devtools.test.tsx | 17 +++++++++++++++++ 2 files changed, 35 insertions(+), 1 deletion(-) diff --git a/src/devtools/devtools.tsx b/src/devtools/devtools.tsx index e740a5e570..9ae4ea53a6 100644 --- a/src/devtools/devtools.tsx +++ b/src/devtools/devtools.tsx @@ -58,6 +58,10 @@ interface DevtoolsOptions { * Defaults to 'aside'. */ containerElement?: string | any + /** + * nonce for style element for CSP + */ + styleNonce?: string } interface DevtoolsPanelOptions { @@ -73,6 +77,10 @@ interface DevtoolsPanelOptions { * A boolean variable indicating whether the panel is open or closed */ isOpen?: boolean + /** + * nonce for style element for CSP + */ + styleNonce?: string /** * A function that toggles the open and close state of the panel */ @@ -92,6 +100,7 @@ export function ReactQueryDevtools({ toggleButtonProps = {}, position = 'bottom-left', containerElement: Container = 'aside', + styleNonce, }: DevtoolsOptions): React.ReactElement | null { const rootRef = React.useRef(null) const panelRef = React.useRef(null) @@ -229,6 +238,7 @@ export function ReactQueryDevtools({ (function ReactQueryDevtoolsPanel(props, ref): React.ReactElement { - const { isOpen = true, setIsOpen, handleDragStart, ...panelProps } = props + const { + isOpen = true, + styleNonce, + setIsOpen, + handleDragStart, + ...panelProps + } = props const queryClient = useQueryClient() const queryCache = queryClient.getQueryCache() @@ -467,6 +483,7 @@ export const ReactQueryDevtoolsPanel = React.forwardRef< {...panelProps} >