Reduce bundle size of 8base auth libraries?

1

I just set up auth by following the same patterns as in the react-8base-starter-app and it was pretty easy to quickly get started! However, the 8base libraries it uses (i.e. @8base/api-client, @8base/react-sdk, @8base/app-provider) all have fairly big bundle sizes (each above 100 KB minified and gzipped), causing the build of the starter app to be ~320 KB.

I was considering using them in production, but probably won’t be possible due to their size.

I’m mostly posting here in case the fix is something easy like excluding unnecessary stuff from the bundle.

2

I’m curious about this as well. And looking for more info about the right packages for 8base + React so I can move forward.

8base libraries seem to be:

  • heavy?
  • some are not documented that well (or at all)?
  • in the case of api-client may not have graphql query cacheing (or does it? I’m not sure. I’d assume it wouldn’t for Nextjs server-side graphql query cacheing?)

Which leads me to think the safest bet is to ignore (some? all?) of the 8base libraries but it’s unclear exactly where the overlap is with alternatives.

If I choose Apollo Boost for graphql client instead of 8base client does that mean:

  1. I can use Apollo Boost for all @8base/api-client, @8base/react-sdk , @8base/app-provider and ‘withAuth from @8base/react-sdk’ uses?

  2. And if so, how specifically do I use Apollo Boost to connect to 8base with all the info 8base needs?

3

Hi @hello,

We are going to work on this later. At this moment, you can’t pass custom apollo client to the our SDK.

Thanks,
Ilya

4

hello @hello

You don’t need any 8base packages to connect to the GraphQL API. This works if you want to use Apollo.

import { from } from 'apollo-link'
import { onError } from 'apollo-link-error'
import { setContext } from 'apollo-link-context'
import { createHttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'
import { ApolloClient } from 'apollo-boost'

import store from '../../store'

export default (options) => {
  const httpLink = createHttpLink({
    uri: "<YOUR API ENDPOINT>"
  })

  /* Error handling link */
  const errorLink = onError(({ graphQLErrors, networkError }) => {
    if (graphQLErrors) {
      graphQLErrors.forEach(({ message, locations, path }) =>
        console.log(
          `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
        )
      )
    }

    if (networkError) console.log(`[Network error]: ${networkError}`)
  })

  const cache = new InMemoryCache({
    addTypename: true
  })

  const authLink = setContext((_, { headers }) => {
    if (store.getters.IS_AUTHORIZED) {
      return {
        headers: {
          Authorization: store.getters.GET_TOKEN,
          ...headers
        }
      }
    }
    return { headers }
  })

  return new ApolloClient({
    link: from([
      errorLink,
      authLink,
      httpLink
    ]),
    cache
  })
}

This snippet works for error handling, setting auth header’s (using a store), and setting the endpoint.