Merge pull request #445 from TheNileDev/jrea/customQuery

feat(react): allow a custom react-query queryclient

packages/react/README.md

@@ -21,7 +21,23 @@ function App() {
 }
 ```
 
-Once added, there is a hook and components available for use.
+Once added, there is a hook and components available for use. It is recommended to place the `<NileProvider />` as high up in your render tree as possible, since it contains both stying and request wrappers.
+
+### Included libraries
+
+Out of the box, [react-query](https://react-query.tanstack.com/) and [mui joy](https://mui.com/joy-ui/getting-started/overview/) is available for use. No set up is required, simply add the dependencies to your code, then use components and functions provided by those libraries.
+
+They can be customize as follows:
+
+```typescript
+function App() {
+  return (
+    <NileProvider basePath={API_URL} queryClient={myQueryClient} theme={theme}>
+      <div>Welcome to my great app</div>
+    </NileProvider>
+  );
+}
+```
 
 ### useNile
 

packages/react/src/context/index.tsx

@@ -1,25 +1,23 @@
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
 import React, { useMemo, createContext, useContext } from 'react';
 import Nile, { NileApi } from '@theniledev/js';
 import { CssVarsProvider } from '@mui/joy/styles';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
-import theme from './themeJoiner';
+import defaultTheme from './themeJoiner';
 import { NileContext, NileProviderProps } from './types';
 
-const queryClient = new QueryClient();
+const defaultQueryClient = new QueryClient();
 
 const defaultContext: NileContext = {
   instance: Nile({ basePath: '', workspace: 'none', credentials: 'include' }),
-  workspace: '',
 };
 
 const context = createContext<NileContext>(defaultContext);
 const { Provider } = context;
 
 export const NileProvider = (props: NileProviderProps) => {
-  const { children } = props;
+  const { children, theme, queryClient } = props;
 
   const values = useMemo<NileContext>(() => {
     return {
@@ -31,19 +29,9 @@ export const NileProvider = (props: NileProviderProps) => {
     };
   }, [props.basePath, props.workspace]);
 
-  if (props.theme) {
-    return (
-      <QueryClientProvider client={queryClient}>
-        <CssVarsProvider theme={props.theme}>
-          <Provider value={values}>{children}</Provider>
-        </CssVarsProvider>
-      </QueryClientProvider>
-    );
-  }
-
   return (
-    <QueryClientProvider client={queryClient}>
-      <CssVarsProvider theme={theme}>
+    <QueryClientProvider client={queryClient ?? defaultQueryClient}>
+      <CssVarsProvider theme={theme ?? defaultTheme}>
         <Provider value={values}>{children}</Provider>
       </CssVarsProvider>
     </QueryClientProvider>

packages/react/src/context/types.ts

@@ -1,6 +1,7 @@
 import { NileApi } from '@theniledev/js';
 import React from 'react';
 import { Theme } from '@mui/joy/styles';
+import { QueryClient } from '@tanstack/react-query';
 
 export interface NileContext {
   instance: NileApi;
@@ -12,4 +13,5 @@ export interface NileProviderProps {
   basePath: string;
   workspace?: string;
   theme?: Theme;
+  queryClient?: QueryClient;
 }