Fix bundle bloat due to Apollo Client imports (#307)

* Migrate Apollo client to deep entrypoint imports See: https://www.apollographql.com/docs/react/development-testing/reducing-bundle-size#picking-an-import-style * Bump version and fix dependencies * Cleanups * Add changeset * Simplify versioning (#309)
quiltt · Dec 18, 2024 · d0033cd · d0033cd
1 parent 803a4d0
commit d0033cd
Show file tree

Hide file tree

Showing 21 changed files with 67 additions and 118 deletions.
diff --git a/.changeset/silver-melons-trade.md b/.changeset/silver-melons-trade.md
@@ -0,0 +1,8 @@
+---
+"@quiltt/react": minor
+"@quiltt/core": minor
+"@quiltt/react-native": minor
+---
+
+- Significantly reduce bundle size by migrating @apollo/client to "deep entrypoint import style"
+- Bump @apollo/client to v3.11.8
diff --git a/package.json b/package.json
@@ -9,7 +9,7 @@
     "prebuild": "[[ $CI = true ]] && npx pnpm@9 install --store=node_modules/.pnpm-store || echo skipping pnpm install; turbo run prebuild",
     "build": "turbo run build",
     "build:packages": "turbo run build --filter='./packages/*'",
-    "changeset": "pnpm -r exec pnpm run --if-present addVersion && npx changeset",
+    "changeset": "npx changeset",
     "check:packages": "pnpm check-dependency-version-consistency .",
     "clean": "turbo run clean",
     "coverage": "vitest run --coverage",
@@ -19,7 +19,7 @@
     "publish": "pnpm run build && npx changeset tag && pnpm -r publish packages --no-git-checks --filter=./packages/**",
     "test": "turbo run test",
     "typecheck": "turbo run typecheck",
-    "version": "npx changeset version && turbo run addVersion",
+    "version": "npx changeset version",
     "postversion": "pnpm exec pnpm install --filter=./packages/** "
   },
   "devDependencies": {
@@ -32,7 +32,6 @@
     "@vitejs/plugin-react": "4.3.3",
     "@vitest/coverage-v8": "2.0.5",
     "check-dependency-version-consistency": "5.0.0",
-    "genversion": "3.2.0",
     "happy-dom": "15.10.2",
     "turbo": "2.3.3",
     "vite": "5.4.6",

diff --git a/packages/core/package.json b/packages/core/package.json
@@ -28,7 +28,7 @@
     "typecheck": "tsc --project tsconfig.json --noEmit"
   },
   "dependencies": {
-    "@apollo/client": "^3.9.11",
+    "@apollo/client": "^3.11.8",
     "@rails/actioncable": "^7.2.200",
     "braces": "^3.0.3",
     "cross-fetch": "^4.0.0",

diff --git a/packages/core/src/api/graphql/client.ts b/packages/core/src/api/graphql/client.ts
@@ -1,5 +1,5 @@
-import type { ApolloClientOptions, Operation } from '@apollo/client/index.js'
-import { ApolloClient, ApolloLink } from '@apollo/client/index.js'
+import type { ApolloClientOptions, Operation } from '@apollo/client/core'
+import { ApolloClient, ApolloLink } from '@apollo/client/core'
 
 import { debugging } from '../../configuration'
 import {
@@ -44,9 +44,16 @@ export class QuilttClient<T> extends ApolloClient<T> {
   }
 }
 
-export { InMemoryCache, gql, useMutation, useQuery, useSubscription } from '@apollo/client/index.js'
-export type {
-  NormalizedCacheObject,
-  OperationVariables,
-  ApolloError,
-} from '@apollo/client/index.js'
+/**
+/* Export Apollo GraphQL assets using deep-imports to prevent unnecessary imports
+/* and make tree-shaking more effective
+*/
+
+/** Client and Tooling */
+export { gql } from '@apollo/client/core'
+export { InMemoryCache } from '@apollo/client/cache'
+export type { ApolloError, OperationVariables } from '@apollo/client/core'
+export type { NormalizedCacheObject } from '@apollo/client/cache'
+
+/** React hooks used by @quiltt/react-native and @quiltt/react */
+export { useMutation, useQuery, useSubscription } from '@apollo/client/react/hooks'
diff --git a/packages/core/src/api/graphql/links/ActionCableLink.ts b/packages/core/src/api/graphql/links/ActionCableLink.ts
@@ -1,5 +1,7 @@
-import type { FetchResult, NextLink, Operation } from '@apollo/client/core/index.js'
-import { ApolloLink, Observable } from '@apollo/client/core/index.js'
+import { ApolloLink } from '@apollo/client/core'
+import { Observable } from '@apollo/client/utilities'
+import type { FetchResult, NextLink, Operation } from '@apollo/client/core'
+
 import { createConsumer } from '@rails/actioncable'
 import type { Consumer } from '@rails/actioncable'
 import { print } from 'graphql'

diff --git a/packages/core/src/api/graphql/links/AuthLink.ts b/packages/core/src/api/graphql/links/AuthLink.ts
@@ -1,5 +1,6 @@
-import type { FetchResult, NextLink, Observable, Operation } from '@apollo/client/index.js'
-import { ApolloLink } from '@apollo/client/index.js'
+import { ApolloLink } from '@apollo/client/core'
+import type { FetchResult, NextLink, Operation } from '@apollo/client/core'
+import type { Observable } from '@apollo/client/utilities'
 
 import { GlobalStorage } from '@/storage'
 

diff --git a/packages/core/src/api/graphql/links/BatchHttpLink.ts b/packages/core/src/api/graphql/links/BatchHttpLink.ts
@@ -1,4 +1,4 @@
-import { BatchHttpLink as ApolloHttpLink } from '@apollo/client/link/batch-http/index.js'
+import { BatchHttpLink as ApolloHttpLink } from '@apollo/client/link/batch-http'
 import crossfetch from 'cross-fetch'
 
 import { endpointGraphQL } from '@/configuration'

diff --git a/packages/core/src/api/graphql/links/ErrorLink.ts b/packages/core/src/api/graphql/links/ErrorLink.ts
@@ -1,7 +1,7 @@
 import { GlobalStorage } from '@/storage'
 
-import type { ServerError } from '@apollo/client/index.js'
-import { onError } from '@apollo/client/link/error/index.js'
+import type { ServerError } from '@apollo/client/core'
+import { onError } from '@apollo/client/link/error'
 
 export const ErrorLink = onError(({ graphQLErrors, networkError }) => {
   if (graphQLErrors) {

diff --git a/packages/core/src/api/graphql/links/ForwardableLink.ts b/packages/core/src/api/graphql/links/ForwardableLink.ts
@@ -1,4 +1,4 @@
-import { ApolloLink } from '@apollo/client/index.js'
+import { ApolloLink } from '@apollo/client/core'
 
 export const ForwardableLink = new ApolloLink((operation, forward) => forward(operation))
 

diff --git a/packages/core/src/api/graphql/links/HttpLink.ts b/packages/core/src/api/graphql/links/HttpLink.ts
@@ -1,4 +1,4 @@
-import { HttpLink as ApolloHttpLink } from '@apollo/client/link/http/index.js'
+import { HttpLink as ApolloHttpLink } from '@apollo/client/link/http'
 import crossfetch from 'cross-fetch'
 
 // Use `cross-fetch` only if `fetch` is not available on the `globalThis` object

diff --git a/packages/core/src/api/graphql/links/RetryLink.ts b/packages/core/src/api/graphql/links/RetryLink.ts
@@ -1,4 +1,4 @@
-import { RetryLink as ApolloRetryLink } from '@apollo/client/link/retry/index.js'
+import { RetryLink as ApolloRetryLink } from '@apollo/client/link/retry'
 
 export const RetryLink = new ApolloRetryLink({
   attempts: {

diff --git a/packages/core/src/api/graphql/links/TerminatingLink.ts b/packages/core/src/api/graphql/links/TerminatingLink.ts
@@ -1,4 +1,4 @@
-import { ApolloLink } from '@apollo/client/index.js'
+import { ApolloLink } from '@apollo/client/core'
 
 export const TerminatingLink = new ApolloLink(() => null)
 

diff --git a/packages/core/src/api/graphql/links/VersionLink.ts b/packages/core/src/api/graphql/links/VersionLink.ts
@@ -1,4 +1,4 @@
-import { ApolloLink } from '@apollo/client/index.js'
+import { ApolloLink } from '@apollo/client/core'
 
 import { version } from '@/configuration'
 

diff --git a/packages/react-native/package.json b/packages/react-native/package.json
@@ -21,8 +21,7 @@
   "files": ["dist/**", "src/**", "CHANGELOG.md"],
   "scripts": {
     "addApiKey": "node scripts/addApiKey.js",
-    "addVersion": "genversion --esm -f src/version.ts",
-    "build": "pnpm run addApiKey && pnpm run addVersion && bunchee",
+    "build": "pnpm run addApiKey && bunchee",
     "clean": "rimraf .turbo dist",
     "dev": "bunchee --watch",
     "lint": "TIMING=1 biome check src/ tests/ --fix",

diff --git a/packages/react-native/src/version.ts b/packages/react-native/src/version.ts
@@ -1,2 +1 @@
-// Generated by genversion.
-export const version = '3.8.2'
+export { version } from '../package.json'
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -26,18 +26,17 @@
   "types": "./dist/index.d.ts",
   "files": ["dist/**", "src/**", "CHANGELOG.md"],
   "scripts": {
-    "addVersion": "genversion --esm -f src/version.ts",
-    "build": "pnpm run addVersion && bunchee",
+    "build": "bunchee",
     "clean": "rimraf .turbo dist",
     "dev": "bunchee --watch",
     "lint": "TIMING=1 biome check src/ tests/ --fix",
     "typecheck": "tsc --project tsconfig.json --noEmit"
   },
   "dependencies": {
+    "@apollo/client": "^3.11.8",
     "@quiltt/core": "workspace:*"
   },
   "devDependencies": {
-    "@apollo/client": "3.9.11",
     "@biomejs/biome": "1.9.4",
     "@types/node": "22.10.2",
     "@types/react": "18.3.12",

diff --git a/packages/react/src/hooks/useQuilttClient.ts b/packages/react/src/hooks/useQuilttClient.ts
@@ -1,6 +1,6 @@
 'use client'
 
-import { useApolloClient } from '@apollo/client/index.js'
+import { useApolloClient } from '@apollo/client/react/hooks'
 
 export const useQuilttClient = useApolloClient
 

diff --git a/packages/react/src/providers/QuilttAuthProvider.tsx b/packages/react/src/providers/QuilttAuthProvider.tsx
@@ -3,8 +3,10 @@
 import type { FC, PropsWithChildren } from 'react'
 import { useEffect, useMemo } from 'react'
 
-import { ApolloProvider } from '@apollo/client'
+import { ApolloProvider } from '@apollo/client/react'
+
 import { InMemoryCache, QuilttClient } from '@quiltt/core'
+
 import { useQuilttSession } from '../hooks'
 
 type QuilttAuthProviderProps = PropsWithChildren & {

diff --git a/packages/react/src/version.ts b/packages/react/src/version.ts
@@ -1,2 +1 @@
-// Generated by genversion.
-export const version = '3.8.2'
+export { version } from '../package.json'