fix: React implicit children type

docs/src/components/LayoutDocs.js

@@ -119,7 +119,7 @@ export const LayoutDocs = props => {
                         <p className='text-sm'>
                           Fast track your learning and {' '}
                           <a
-                            href="https://ui.dev/checkout/react-query?from=tanstack"
+                            href="https://ui.dev/react-query?from=tanstack"
                             className="text-blue-600 font-semibold transition-colors duration-150 ease-out"
                           >
                             take the offical course ↗️
@@ -128,14 +128,19 @@ export const LayoutDocs = props => {
                       </div>
                       <div className="mt-12 relative">
                         <h4 className="font-semibold uppercase text-sm mb-2 mt-2 text-gray-500">
-                          Subscribe to Bytes
+                          Subscribe to{' '}
+                          <a
+                            className="text-blue-600"
+                            href="https://bytes.dev?r=tanstack"
+                          >
+                            Bytes
+                          </a>
                         </h4>
                         <p className="mt-4  text-sm leading-6 mb-4">
-                          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.
                         </p>
                         <BytesForm />
-
                       </div>
                     </div>
                   </div>

docs/src/components/Nav.js

@@ -37,7 +37,7 @@ export const Nav = () => (
             </div>
             <div>
               <a
-                href="https://learn.tanstack.com/p/react-query-essentials"
+                href="https://ui.dev/react-query?from=tanstack"
                 target="_blank"
                 className="leading-6 font-medium"
               >

docs/src/components/PPPBanner.js

@@ -49,7 +49,7 @@ export function PPPBanner() {
             Course with code{' '}
             <a
               className="underline cursor-pointer"
-              href={`/checkout/react-query?from=tanstack&coupon_code=${data.coupon}`}
+              href={`https://ui.dev/react-query?from=tanstack&coupon_code=${data.coupon}`}
             >
               <strong>{data.coupon}</strong>
             </a>

docs/src/pages/index.js

@@ -74,7 +74,7 @@ const Home = ({ sponsors }) => {
                     <p>
                       Want to skip the docs?{' '}
                       <a
-                        href="https://ui.dev/checkout/react-query?from=tanstack"
+                        href="https://ui.dev/react-query?from=tanstack"
                         className="text-blue-600 font-semibold transition-colors duration-150 ease-out"
                       >
                         Take the offical course
@@ -177,7 +177,7 @@ const Home = ({ sponsors }) => {
                   </span>
                 </div>
                 <a
-                  href="https://ui.dev/checkout/react-query?from=tanstack"
+                  href="https://ui.dev/react-query?from=tanstack"
                   target="_blank"
                   className="inline-block mt-8 rounded shadow-lg bg-coral text-white font-bold text-xl px-4 py-3"
                 >
@@ -375,7 +375,7 @@ const Home = ({ sponsors }) => {
             </h2>
             <div className="mt-8 flex lg:flex-shrink-0 md:mt-0">
               <div className="inline-flex rounded-md shadow">
-                  <a href="https://ui.dev/checkout/react-query?from=tanstack" className="inline-flex items-center justify-center text-center px-5 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-coral hover:bg-coral-light focus:outline-none focus:shadow-outline transition duration-150 ease-in-out">
+                  <a href="https://ui.dev/react-query?from=tanstack" className="inline-flex items-center justify-center text-center px-5 py-3 border border-transparent text-base leading-6 font-medium rounded-md text-white bg-coral hover:bg-coral-light focus:outline-none focus:shadow-outline transition duration-150 ease-in-out">
                     Take the course
                   </a>
               </div>

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)

docs/src/pages/react-native.md

@@ -55,16 +55,19 @@ import React from 'react'
 import { useFocusEffect } from '@react-navigation/native'
 
 export function useRefreshOnFocus<T>(refetch: () => Promise<T>) {
-  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.

src/react/Hydrate.tsx

@@ -23,6 +23,7 @@ export function useHydrate(state: unknown, options?: HydrateOptions) {
 export interface HydrateProps {
   state?: unknown
   options?: HydrateOptions
+  children?: React.ReactNode
 }
 
 export const Hydrate: React.FC<HydrateProps> = ({

src/react/QueryClientProvider.tsx

@@ -44,6 +44,7 @@ export const useQueryClient = () => {
 export interface QueryClientProviderProps {
   client: QueryClient
   contextSharing?: boolean
+  children?: React.ReactNode
 }
 
 export const QueryClientProvider: React.FC<QueryClientProviderProps> = ({

src/react/tests/utils.tsx

@@ -67,10 +67,12 @@ export const expectType = <T,>(_: T): void => undefined
 export const expectTypeNotAny = <T,>(_: 0 extends 1 & T ? never : T): void =>
   undefined
 
-export const Blink: React.FC<{ duration: number }> = ({
-  duration,
-  children,
-}) => {
+interface BlinkProps {
+  duration: number
+  children?: React.ReactNode
+}
+
+export const Blink: React.FC<BlinkProps> = ({ duration, children }) => {
   const [shouldShow, setShouldShow] = React.useState<boolean>(true)
 
   React.useEffect(() => {