Bundle size comparison between GraphQL clients

comparison.md

• Standard create-react-app
• Sets up the GraphQL provider and client, nothing else

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
// Switch between them with comments
// import GraphQLProvider from "./Apollo"
import GraphQLProvider from "./Urql"

ReactDOM.render(
  <React.StrictMode>
    <GraphQLProvider>
      <App />
    </GraphQLProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

Urql

import { createClient, Provider, dedupExchange, fetchExchange } from 'urql';
import { cacheExchange } from '@urql/exchange-graphcache';

const client = createClient({
  url: 'https://48p1r2roz4.sse.codesandbox.io',
  exchanges: [dedupExchange, cacheExchange({}), fetchExchange],
});

export default function Apollo({ children }) {
  return (
    <Provider value={client}>
      {children}
    </Provider>
  )
}

~/projects/bundle-size-test 
❯ yarn build
yarn run v1.22.4
$ react-scripts build
Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  62.89 KB (+21.55 KB)  build/static/js/2.df985265.chunk.js
  781 B                 build/static/js/runtime-main.e41effb0.js
  409 B (+115 B)        build/static/js/main.970c95a7.chunk.js

Apollo Client

import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';

const client = new ApolloClient({
  uri: 'https://48p1r2roz4.sse.codesandbox.io',
  cache: new InMemoryCache()
});

export default function Apollo({ children }) {
  return (
    <ApolloProvider client={client}>
      {children}
    </ApolloProvider>
  )
}

~/projects/bundle-size-test 
❯ yarn build
yarn run v1.22.4
$ react-scripts build
Creating an optimized production build...
Compiled successfully.

File sizes after gzip:

  84.47 KB (+43.13 KB)  build/static/js/2.1f9961ce.chunk.js
  781 B                 build/static/js/runtime-main.e41effb0.js
  412 B (+118 B)        build/static/js/main.a3680a0f.chunk.js