Merge pull request #5577 from apollographql/cache-entry-point

Wire up the `@apollo/client/cache` entry point

CHANGELOG.md

@@ -34,6 +34,9 @@
 - `@apollo/client/core` can be used to import the Apollo Client core, which includes everything the main `@apollo/client` package does, except for all React related functionality.  <br/>
   [@kamilkisiela](https://github.com/kamilkisiela) in [#5541](https://github.com/apollographql/apollo-client/pull/5541)
 
+- `@apollo/client/cache` can be used to import the Apollo Client cache without importing other parts of the Apollo Client codebase. <br/>
+  [@hwillson](https://github.com/hwillson) in [#5577](https://github.com/apollographql/apollo-client/pull/5577)
+
 ### Breaking Changes
 
 - Removed `graphql-anywhere` since it's no longer used by Apollo Client.  <br/>

config/prepareDist.js

@@ -14,6 +14,8 @@
 const fs = require('fs');
 const recast = require('recast');
 
+const distRoot = `${__dirname}/../dist`;
+
 
 /* @apollo/client */
 
@@ -42,7 +44,7 @@ const distPackageJson = JSON.stringify(packageJson, (_key, value) => {
 }, 2) + "\n";
 
 // Save the modified package.json to "dist"
-fs.writeFileSync(`${__dirname}/../dist/package.json`, distPackageJson);
+fs.writeFileSync(`${distRoot}/package.json`, distPackageJson);
 
 // Copy supporting files into "dist"
 const srcDir = `${__dirname}/..`;
@@ -51,7 +53,7 @@ fs.copyFileSync(`${srcDir}/README.md`,  `${destDir}/README.md`);
 fs.copyFileSync(`${srcDir}/LICENSE`,  `${destDir}/LICENSE`);
 
 
-/* @apollo/client/core */
+/* @apollo/client/core, @apollo/client/cache */
 
 function buildPackageJson(bundleName) {
   return JSON.stringify({
@@ -62,33 +64,42 @@ function buildPackageJson(bundleName) {
   }, null, 2) + "\n";
 }
 
-// Create a `core` bundle package.json, storing it in the dist core
-// directory. This helps provide a way for Apollo Client to be used without
-// React, via `@apollo/client/core`.
-fs.writeFileSync(
-  `${__dirname}/../dist/core/package.json`,
-  buildPackageJson('core')
-);
-
-// Build a new `core.cjs.js` entry point file, that includes everything
-// except the exports listed in `src/react/index.ts`. Copy this file into
-// the `dist/core` directory, to allow Apollo Client core only imports
-// using `@apollo/client/core`.
-
-const reactIndexSrc = fs.readFileSync(`${__dirname}/../dist/react/index.js`);
-const reactExports = [];
-recast.visit(recast.parse(reactIndexSrc), {
-  visitExportSpecifier(path) {
-    reactExports.push(path.value.exported.name);
-    return false;
-  },
-});
-
-fs.writeFileSync(`${__dirname}/../dist/core/core.cjs.js`, [
-  "const allExports = require('../apollo-client.cjs');",
-  `const reactExportNames = new Set(${JSON.stringify(reactExports)});`,
-  "Object.keys(allExports).forEach(name => {",
-  "  if (!reactExportNames.has(name)) exports[name] = allExports[name];",
-  "});",
-  "",
-].join('\n'));
+function loadExportNames(bundleName) {
+  const indexSrc =
+    fs.readFileSync(`${distRoot}/${bundleName}/index.js`);
+  const exportNames = [];
+  recast.visit(recast.parse(indexSrc), {
+    visitExportSpecifier(path) {
+      exportNames.push(path.value.exported.name);
+      return false;
+    },
+  });
+  return exportNames;
+}
+
+function writeCjsIndex(bundleName, exportNames, includeNames = true) {
+  const filterPrefix = includeNames ? '' : '!';
+  fs.writeFileSync(`${distRoot}/${bundleName}/${bundleName}.cjs.js`, [
+    "const allExports = require('../apollo-client.cjs');",
+    `const names = new Set(${JSON.stringify(exportNames)});`,
+    "Object.keys(allExports).forEach(name => {",
+    `  if (${filterPrefix}names.has(name)) {`,
+    "    exports[name] = allExports[name];",
+    "  }",
+    "});",
+    "",
+  ].join('\n'));
+}
+
+// Create `core` and `cache` bundle package.json files, storing them in their
+// associated dist directory. This helps provide a way for the Apollo Client
+// core to be used without React (via `@apollo/client/core`), and the cache
+// to be used by itself (via `@apollo/client/cache`). Also create
+// `core.cjs.js` and `cache.cjs.js` CommonJS entry point files that only
+// include the exports needed for each bundle.
+
+fs.writeFileSync(`${distRoot}/core/package.json`, buildPackageJson('core'));
+writeCjsIndex('core', loadExportNames('react'), false);
+
+fs.writeFileSync(`${distRoot}/cache/package.json`, buildPackageJson('cache'));
+writeCjsIndex('cache', loadExportNames('cache'));

src/cache/index.ts

@@ -0,0 +1,10 @@
+export { Transaction, ApolloCache } from './core/cache';
+export { Cache } from './core/types/Cache';
+export { DataProxy } from './core/types/DataProxy';
+
+export {
+  InMemoryCache,
+  InMemoryCacheConfig,
+} from './inmemory/inMemoryCache';
+export { defaultDataIdFromObject } from './inmemory/policies';
+export * from './inmemory/types';

src/core/index.ts

@@ -34,15 +34,7 @@ export { isApolloError, ApolloError } from '../errors/ApolloError';
 
 /* Cache */
 
-export { Transaction, ApolloCache } from '../cache/core/cache';
-export { Cache } from '../cache/core/types/Cache';
-export { DataProxy } from '../cache/core/types/DataProxy';
-export {
-  InMemoryCache,
-  InMemoryCacheConfig,
-} from '../cache/inmemory/inMemoryCache';
-export { defaultDataIdFromObject } from '../cache/inmemory/policies';
-export * from '../cache/inmemory/types';
+export * from '../cache';
 
 /* Link */
 

src/react/context/ApolloConsumer.tsx

@@ -1,14 +1,15 @@
-import React from 'react';
 import { invariant } from 'ts-invariant';
 
 import { ApolloClient } from '../../ApolloClient';
 import { getApolloContext } from './ApolloContext';
+import { requireReactLazily } from '../react';
 
 export interface ApolloConsumerProps {
   children: (client: ApolloClient<object>) => React.ReactChild | null;
 }
 
 export const ApolloConsumer: React.FC<ApolloConsumerProps> = props => {
+  const React = requireReactLazily();
   const ApolloContext = getApolloContext();
   return (
     <ApolloContext.Consumer>

src/react/context/ApolloContext.ts

@@ -1,6 +1,5 @@
-import React from 'react';
-
 import { ApolloClient } from '../../ApolloClient';
+import { requireReactLazily } from '../react';
 
 export interface ApolloContextValue {
   client?: ApolloClient<object>;
@@ -17,6 +16,7 @@ export interface ApolloContextValue {
 const contextSymbol = Symbol.for('__APOLLO_CONTEXT__');
 
 export function resetApolloContext() {
+  const React = requireReactLazily();
   Object.defineProperty(React, contextSymbol, {
     value: React.createContext<ApolloContextValue>({}),
     enumerable: false,
@@ -26,6 +26,7 @@ export function resetApolloContext() {
 }
 
 export function getApolloContext() {
+  const React = requireReactLazily();
   if (!(React as any)[contextSymbol]) {
     resetApolloContext();
   }

src/react/context/ApolloProvider.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
 import { invariant } from 'ts-invariant';
 
 import { ApolloClient } from '../../ApolloClient';
 import { getApolloContext } from './ApolloContext';
+import { requireReactLazily } from '../react';
 
 export interface ApolloProviderProps<TCache> {
   client: ApolloClient<TCache>;
@@ -13,6 +13,7 @@ export const ApolloProvider: React.FC<ApolloProviderProps<any>> = ({
   client,
   children
 }) => {
+  const React = requireReactLazily();
   const ApolloContext = getApolloContext();
   return (
     <ApolloContext.Consumer>

src/react/context/__tests__/ApolloConsumer.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, cleanup } from '@testing-library/react';
 
 import { ApolloLink } from '../../../link/core/ApolloLink';
@@ -7,6 +6,9 @@ import { InMemoryCache as Cache } from '../../../cache/inmemory/inMemoryCache';
 import { ApolloProvider } from '../ApolloProvider';
 import { ApolloConsumer } from '../ApolloConsumer';
 import { getApolloContext } from '../ApolloContext';
+import { requireReactLazily } from '../../react';
+
+const React = requireReactLazily();
 
 const client = new ApolloClient({
   cache: new Cache(),

src/react/context/__tests__/ApolloProvider.test.tsx

@@ -1,11 +1,14 @@
-import React, { useContext } from 'react';
 import { render, cleanup } from '@testing-library/react';
 
 import { ApolloLink } from '../../../link/core/ApolloLink';
 import { ApolloClient } from '../../../ApolloClient';
 import { InMemoryCache as Cache } from '../../../cache/inmemory/inMemoryCache';
 import { ApolloProvider } from '../ApolloProvider';
 import { getApolloContext } from '../ApolloContext';
+import { requireReactLazily } from '../../react';
+
+const React = requireReactLazily();
+const { useContext } = React;
 
 describe('<ApolloProvider /> Component', () => {
   afterEach(cleanup);

src/react/hooks/__tests__/useApolloClient.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, cleanup } from '@testing-library/react';
 import { InvariantError } from 'ts-invariant';
 
@@ -8,6 +7,9 @@ import { ApolloClient } from '../../../ApolloClient';
 import { InMemoryCache } from '../../../cache/inmemory/inMemoryCache';
 import { useApolloClient } from '../useApolloClient';
 import { resetApolloContext } from '../../context/ApolloContext';
+import { requireReactLazily } from '../../react';
+
+const React = requireReactLazily();
 
 describe('useApolloClient Hook', () => {
   afterEach(() => {

src/react/hooks/__tests__/useLazyQuery.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { DocumentNode } from 'graphql';
 import gql from 'graphql-tag';
 import { render, wait } from '@testing-library/react';
@@ -8,6 +7,9 @@ import { ApolloClient } from '../../../ApolloClient';
 import { InMemoryCache } from '../../../cache/inmemory/inMemoryCache';
 import { ApolloProvider } from '../../context/ApolloProvider';
 import { useLazyQuery } from '../useLazyQuery';
+import { requireReactLazily } from '../../react';
+
+const React = requireReactLazily();
 
 describe('useLazyQuery Hook', () => {
   const CAR_QUERY: DocumentNode = gql`

src/react/hooks/__tests__/useMutation.test.tsx

@@ -1,4 +1,3 @@
-import React, { useEffect } from 'react';
 import { DocumentNode } from 'graphql';
 import gql from 'graphql-tag';
 import { render, cleanup, wait } from '@testing-library/react';
@@ -9,6 +8,10 @@ import { ApolloClient } from '../../../ApolloClient';
 import { InMemoryCache } from '../../../cache/inmemory/inMemoryCache';
 import { ApolloProvider } from '../../context/ApolloProvider';
 import { useMutation } from '../useMutation';
+import { requireReactLazily } from '../../react';
+
+const React = requireReactLazily();
+const { useEffect } = React;
 
 describe('useMutation Hook', () => {
   interface Todo {

src/react/hooks/__tests__/useQuery.test.tsx

@@ -1,4 +1,3 @@
-import React, { useState, useReducer } from 'react';
 import { DocumentNode, GraphQLError } from 'graphql';
 import gql from 'graphql-tag';
 import { render, cleanup, wait } from '@testing-library/react';
@@ -12,6 +11,10 @@ import { ApolloClient } from '../../../ApolloClient';
 import { InMemoryCache } from '../../../cache/inmemory/inMemoryCache';
 import { ApolloProvider } from '../../context/ApolloProvider';
 import { useQuery } from '../useQuery';
+import { requireReactLazily } from '../../react';
+
+const React = requireReactLazily();
+const { useState, useReducer } = React;
 
 describe('useQuery Hook', () => {
   const CAR_QUERY: DocumentNode = gql`

src/react/hooks/__tests__/useSubscription.test.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, cleanup, wait } from '@testing-library/react';
 import gql from 'graphql-tag';
 
@@ -7,6 +6,9 @@ import { ApolloClient } from '../../../ApolloClient';
 import { InMemoryCache as Cache } from '../../../cache/inmemory/inMemoryCache';
 import { ApolloProvider } from '../../context/ApolloProvider';
 import { useSubscription } from '../useSubscription';
+import { requireReactLazily } from '../../react';
+
+const React = requireReactLazily();
 
 describe('useSubscription Hook', () => {
   afterEach(cleanup);

src/react/hooks/useApolloClient.ts

@@ -1,10 +1,11 @@
-import React from 'react';
 import { invariant } from 'ts-invariant';
 
 import { ApolloClient } from '../../ApolloClient';
 import { getApolloContext } from '../context/ApolloContext';
+import { requireReactLazily } from '../react';
 
 export function useApolloClient(): ApolloClient<object> {
+  const React = requireReactLazily();
   const { client } = React.useContext(getApolloContext());
   invariant(
     client,

src/react/hooks/useMutation.ts

@@ -1,15 +1,16 @@
-import { useContext, useState, useRef, useEffect } from 'react';
 import { DocumentNode } from 'graphql';
 
 import { MutationHookOptions, MutationTuple } from '../types/types';
 import { MutationData } from '../data/MutationData';
 import { OperationVariables } from '../../core/types';
 import { getApolloContext } from '../context/ApolloContext';
+import { requireReactLazily } from '../react';
 
 export function useMutation<TData = any, TVariables = OperationVariables>(
   mutation: DocumentNode,
   options?: MutationHookOptions<TData, TVariables>
 ): MutationTuple<TData, TVariables> {
+  const { useContext, useState, useRef, useEffect } = requireReactLazily();
   const context = useContext(getApolloContext());
   const [result, setResult] = useState({ called: false, loading: false });
   const updatedOptions = options ? { ...options, mutation } : { mutation };

src/react/hooks/useSubscription.ts

@@ -1,15 +1,17 @@
-import { useContext, useState, useRef, useEffect } from 'react';
 import { DocumentNode } from 'graphql';
 
 import { SubscriptionHookOptions } from '../types/types';
 import { SubscriptionData } from '../data/SubscriptionData';
 import { OperationVariables } from '../../core/types';
 import { getApolloContext } from '../context/ApolloContext';
+import { requireReactLazily } from '../react';
 
 export function useSubscription<TData = any, TVariables = OperationVariables>(
   subscription: DocumentNode,
   options?: SubscriptionHookOptions<TData, TVariables>
 ) {
+  const React = requireReactLazily();
+  const { useContext, useState, useRef, useEffect } = React;
   const context = useContext(getApolloContext());
   const updatedOptions = options
     ? { ...options, subscription }

src/react/hooks/utils/useBaseQuery.ts

@@ -1,4 +1,3 @@
-import { useContext, useEffect, useReducer, useRef } from 'react';
 import { DocumentNode } from 'graphql';
 
 import {
@@ -11,12 +10,15 @@ import { QueryData } from '../../data/QueryData';
 import { useDeepMemo } from './useDeepMemo';
 import { OperationVariables } from '../../../core/types';
 import { getApolloContext } from '../../context/ApolloContext';
+import { requireReactLazily } from '../../react';
 
 export function useBaseQuery<TData = any, TVariables = OperationVariables>(
   query: DocumentNode,
   options?: QueryHookOptions<TData, TVariables>,
   lazy = false
 ) {
+  const React = requireReactLazily();
+  const { useContext, useEffect, useReducer, useRef } = React;
   const context = useContext(getApolloContext());
   const [tick, forceUpdate] = useReducer(x => x + 1, 0);
   const updatedOptions = options ? { ...options, query } : { query };

src/react/hooks/utils/useDeepMemo.ts

@@ -1,6 +1,7 @@
-import { useRef } from 'react';
 import { equal as isEqual } from '@wry/equality';
 
+import { requireReactLazily } from '../../react';
+
 /**
  * Memoize a result using deep equality. This hook has two advantages over
  * React.useMemo: it uses deep equality to compare memo keys, and it guarantees
@@ -12,6 +13,8 @@ export function useDeepMemo<TKey, TValue>(
   memoFn: () => TValue,
   key: TKey
 ): TValue {
+  const React = requireReactLazily();
+  const { useRef } = React;
   const ref = useRef<{ key: TKey; value: TValue }>();
 
   if (!ref.current || !isEqual(key, ref.current.key)) {