feat(custom-data-provider): include react-query provider in custom-data-provider

Since the useDataQuery hook now uses react-query internally the
CustomDataProvider has been updated as well:

* We've configured react-query to not retry on errors when the useDataQuery
hook is a descendant of the CustomDataProvider. That way your tests won't time out
if you're testing queries that throw an error.

* The CustomDataProvider now accepts a `queryClientOptions` prop, which
allows you to configure react-query's QueryClient. For the available
options see: https://react-query.tanstack.com/reference/QueryClient

Author: ismay

services/data/src/__tests__/integration.test.tsx

@@ -1,24 +1,9 @@
 import { render, waitFor } from '@testing-library/react'
 import React, { ReactNode } from 'react'
-import { QueryClient, QueryClientProvider, setLogger } from 'react-query'
+import { setLogger } from 'react-query'
 import { CustomDataProvider, DataQuery } from '../react'
 import { QueryRenderInput } from '../types'
 
-// eslint-disable-next-line react/display-name
-const createWrapper = (mockData, queryClientOptions = {}) => ({
-    children,
-}: {
-    children?: ReactNode
-}) => {
-    const queryClient = new QueryClient(queryClientOptions)
-
-    return (
-        <QueryClientProvider client={queryClient}>
-            <CustomDataProvider data={mockData}>{children}</CustomDataProvider>
-        </QueryClientProvider>
-    )
-}
-
 beforeAll(() => {
     // Prevent the react-query logger from logging to the console
     setLogger({
@@ -38,7 +23,9 @@ describe('Testing custom data provider and useQuery hook', () => {
         const data = {
             answer: 42,
         }
-        const wrapper = createWrapper(data)
+        const wrapper = ({ children }) => (
+            <CustomDataProvider data={data}>{children}</CustomDataProvider>
+        )
         const renderFunction = jest.fn(
             ({ loading, error, data }: QueryRenderInput) => {
                 if (loading) return 'loading'
@@ -88,14 +75,9 @@ describe('Testing custom data provider and useQuery hook', () => {
                 throw expectedError
             },
         }
-        // Disable automatic retries, see: https://react-query.tanstack.com/reference/useQuery
-        const wrapper = createWrapper(data, {
-            defaultOptions: {
-                queries: {
-                    retry: false,
-                },
-            },
-        })
+        const wrapper = ({ children }) => (
+            <CustomDataProvider data={data}>{children}</CustomDataProvider>
+        )
         const renderFunction = jest.fn(
             ({ loading, error, data }: QueryRenderInput) => {
                 if (loading) return 'loading'

services/data/src/react/components/CustomDataProvider.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import { QueryClient, QueryClientProvider } from 'react-query'
 import { DataEngine } from '../../engine'
 import { CustomDataLink, CustomData, CustomLinkOptions } from '../../links'
 import { DataContext } from '../context/DataContext'
@@ -7,17 +8,37 @@ interface CustomProviderInput {
     children: React.ReactNode
     data: CustomData
     options?: CustomLinkOptions
+    queryClientOptions?: any
 }
+
+/**
+ * Disable automatic retries, which can cause tests to take unnecessarily long
+ * see: https://react-query.tanstack.com/reference/useQuery
+ */
+const defaultQueryClientOptions = {
+    defaultOptions: {
+        queries: {
+            retry: false,
+        },
+    },
+}
+
 export const CustomDataProvider = ({
     children,
     data,
     options,
+    queryClientOptions = defaultQueryClientOptions,
 }: CustomProviderInput) => {
     const link = new CustomDataLink(data, options)
     const engine = new DataEngine(link)
-
+    const queryClient = new QueryClient(queryClientOptions)
     const context = { engine }
+
     return (
-        <DataContext.Provider value={context}>{children}</DataContext.Provider>
+        <QueryClientProvider client={queryClient}>
+            <DataContext.Provider value={context}>
+                {children}
+            </DataContext.Provider>
+        </QueryClientProvider>
     )
 }