Merge pull request #1639 from Tobbe/tobbe-redwoodapolloprovider

Don't bundle Apollo Client if the user specify their own client

packages/auth/src/useAuth.ts

@@ -12,7 +12,7 @@ declare global {
     /**
      * Global reference to @redwoodjs/auth's `useAuth` hook for zero-config authentication.
      * This is used as the default value for `useAuth` in @redwoodjs/router's `Router`,
-     * and @redwoodjs/web's `RedwoodProvider` so that the user no longer has to pass
+     * and @redwoodjs/web's `RedwoodApolloProvider` so that the user no longer has to pass
      * in the value.
      */
     __REDWOOD__USE_AUTH: () => AuthContextInterface

packages/cli/src/commands/generate/auth/auth.js

@@ -49,12 +49,14 @@ const addWebInit = (content, init) => {
 
 // returns the content of index.js with <AuthProvider> added
 const addWebRender = (content, authProvider) => {
-  const [_, indent, redwoodProvider] = content.match(
-    /(\s+)(<RedwoodProvider>.*<\/RedwoodProvider>)/s
+  const [_, indent, redwoodApolloProvider] = content.match(
+    /(\s+)(<RedwoodApolloProvider>.*<\/RedwoodApolloProvider>)/s
   )
-  const redwoodProviderLines = redwoodProvider.split('\n').map((line) => {
-    return '  ' + line
-  })
+  const redwoodApolloProviderLines = redwoodApolloProvider
+    .split('\n')
+    .map((line) => {
+      return '  ' + line
+    })
   const customRenderOpen = (authProvider.render || []).reduce(
     (acc, component) => acc + indent + `<${component}>`,
     ''
@@ -70,13 +72,13 @@ const addWebRender = (content, authProvider) => {
     indent +
     `<AuthProvider client={${authProvider.client}} type="${authProvider.type}">` +
     indent +
-    redwoodProviderLines.join('\n') +
+    redwoodApolloProviderLines.join('\n') +
     indent +
     `</AuthProvider>` +
     customRenderClose
 
   return content.replace(
-    /\s+<RedwoodProvider>.*<\/RedwoodProvider>/s,
+    /\s+<RedwoodApolloProvider>.*<\/RedwoodApolloProvider>/s,
     renderContent
   )
 }

packages/core/config/webpack.common.js

@@ -175,6 +175,13 @@ module.exports = (webpackEnv) => {
           'node_modules',
           'styled-components'
         ),
+        // This is needed because we don't yet have support for this:
+        // https://webpack.js.org/guides/package-exports/
+        '@redwoodjs/web/apollo': path.resolve(
+          redwoodPaths.base,
+          'node_modules',
+          '@redwoodjs/web/dist/components/apollo'
+        ),
         react: path.resolve(redwoodPaths.base, 'node_modules', 'react'),
       },
     },

packages/create-redwood-app/template/web/src/index.js

@@ -1,6 +1,7 @@
 import ReactDOM from 'react-dom'
 
-import { RedwoodProvider, FatalErrorBoundary } from '@redwoodjs/web'
+import { FatalErrorBoundary } from '@redwoodjs/web'
+import { RedwoodApolloProvider } from '@redwoodjs/web/apollo'
 
 import FatalErrorPage from 'src/pages/FatalErrorPage'
 import Routes from 'src/Routes'
@@ -9,9 +10,9 @@ import './index.css'
 
 ReactDOM.render(
   <FatalErrorBoundary page={FatalErrorPage}>
-    <RedwoodProvider>
+    <RedwoodApolloProvider>
       <Routes />
-    </RedwoodProvider>
+    </RedwoodApolloProvider>
   </FatalErrorBoundary>,
   document.getElementById('redwood-app')
 )

packages/testing/src/MockProviders.tsx

@@ -6,7 +6,7 @@ import React from 'react'
 
 import { AuthProvider } from '@redwoodjs/auth'
 import type { AuthContextInterface } from '@redwoodjs/auth'
-import { RedwoodProvider } from '@redwoodjs/web'
+import { RedwoodApolloProvider } from '@redwoodjs/web/apollo'
 
 import { mockedUserMeta } from './mockRequests'
 
@@ -53,10 +53,10 @@ export const mockAuthClient = {
 export const MockProviders: React.FunctionComponent = ({ children }) => {
   return (
     <AuthProvider client={mockAuthClient} type="custom">
-      <RedwoodProvider useAuth={fakeUseAuth}>
+      <RedwoodApolloProvider useAuth={fakeUseAuth}>
         <UserRouterWithRoutes />
         {children}
-      </RedwoodProvider>
+      </RedwoodApolloProvider>
     </AuthProvider>
   )
 }

packages/testing/tsconfig.json

@@ -6,7 +6,8 @@
     "tsBuildInfoFile": "dist/tsconfig.tsbuildinfo",
     "outDir": "dist",
     "paths": {
-      "src/*": ["./src/*"]
+      "src/*": ["./src/*"],
+      "@redwoodjs/web/apollo": ["../web/dist/components/apollo"]
     }
   },
   "include": [

packages/web/package.json

@@ -4,7 +4,11 @@
   "files": [
     "dist"
   ],
-  "main": "dist/index.js",
+  "main": "./dist/index.js",
+  "exports": {
+    ".": "./dist/index.js",
+    "./apollo": "./dist/components/apollo.js"
+  },
   "types": "dist/index.d.ts",
   "license": "MIT",
   "dependencies": {

packages/web/src/components/apollo.ts

@@ -0,0 +1,6 @@
+// We link to this file using "paths" in testing/tsconfig.js because TS
+// doesn't support "exports" in package.json yet. When that is resolved
+// this file should stay, but the config in tsconfig.json should be
+// removed.
+// See https://github.com/microsoft/TypeScript/issues/33079
+export { RedwoodApolloProvider } from './RedwoodApolloProvider'

packages/web/src/flash/README.md

@@ -10,7 +10,7 @@ Flash makes use of [React's Context API](https://reactjs.org/docs/context.html)
 
 ## FlashContext
 
-FlashContext is the headquarters for Redwood's Flash system. Its provider component is packaged with the `<RedwoodProvider />` component which makes it ready to use out of the box. Your components can pass (think, "send and recieve") message objects by subscribing to it via the provided [useFlash](#useflash) hook.
+FlashContext is the headquarters for Redwood's Flash system. Its provider component is packaged with the `<RedwoodApolloProvider />` component which makes it ready to use out of the box. Your components can pass (think, "send and recieve") message objects by subscribing to it via the provided [useFlash](#useflash) hook.
 
 FlashContext provides update functions which allow subscribed components to send and manipulate message objects. Subscribers can [consume](#consume-messages), [add](#add-a-message), [dismiss](#dismiss-a-message), and [cycle messages](#cycle-a-message).
 
@@ -159,7 +159,7 @@ const Message = ({ message }) => {
 
 ## useFlash
 
-`useFlash` is an abridgment of `React.useContext(FlashContext)`. It allows you to subscribe to FlashContext's properties and functions from within any component nested within `<RedwoodProvider />`.
+`useFlash` is an abridgment of `React.useContext(FlashContext)`. It allows you to subscribe to FlashContext's properties and functions from within any component nested within `<RedwoodApolloProvider />`.
 
 ```js
   import { useFlash } from '@redwoodjs/web'

packages/web/src/index.ts

@@ -2,7 +2,6 @@ import './global.web-auto-imports'
 import './config'
 
 export { default as FatalErrorBoundary } from './components/FatalErrorBoundary'
-export { RedwoodApolloProvider as RedwoodProvider } from './components/RedwoodApolloProvider'
 export {
   FetchConfigProvider,
   useFetchConfig,