CRWN Clothing App - Migration From Apollo Client 2 to Apollo Client 3

Project Overview

This project is my solution for:

• a migration from Apollo Client 2 to Apollo Client 3 for the CRWN Clothing app; a fictional online clothing store.

Related Projects

• To see the repo we're migrating from visit: CRWN Clothing - React & Apollo Client 2
• For the main CRWN Clothing project that uses React & Redux-Sagas visit: CRWN Clothing - React & Redux
• GraphQL Server for this application: crwn-clothing-prisma

A Quick Summary of Changes From Apollo Client 2 to 3

The main Apollo Client 3 changes of concern for this app are summarised in the table below.

	Apollo Client 2	Apollo Client 3
Initialising Local State Values	client.writeData() method	Choice between: Reactive Variables Local Cache via client.writeQuery() method
Mutating Local State	Local Resolvers An object of resolver functions Resembles resolvers used on the GraphQL Server	Reactive Vars → pass new value as argument In cache, define TypePolicy for Mutation type In TypePolicy define Local Fields For each Local Field, write a merge function that determines the new value of the Local Field
Executing Queries	Query component Client-side queries are resolved by Local Resolvers	useQuery() Hook Note: @client directive tells Apollo to Query the Local Fields
Executing Mutations	Mutation component Client-side mutations are resolved by Local Resolvers	useMutation() Hook Note: @client directive tells Apollo execute Mutations via the Local Fields Alternatively, we can use: Reactive Variables, which strongly resemble the useState() hook from React - in functionality

Data Peristence Solutions

Apollo 3 Cache Persist - For Cached Data On Clothing Collections

• The CRWN Clothing - React & Apollo Client 2 project used apollo-cache-persist to persist the application's state
• apollo3-cache-persist was released for data persistence with Apollo Client 3 cache implementations

The collections data (i.e. categories for clothing items) is queried from the GraphQL Server and cached locally in Apollo Client's cache. Caching this data ensures that load times are reduced when users refresh or revisit the app; as data is pulled from the cache instead of executing queries for the same data again.

Local Storage - For Persisting Shopping Cart-related State

With the migration to Apollo Client 3, the CRWN Clothing app uses Reactive Variables to handle local state-management. These variables are not cached by apollo and as a result any cart data would disappear on refresh/re-renders. To persist the data, we have to leverage Local Storage.

In this repo at filepath /src/utils/local-storage.utils.js, you can find a few helper functions that I created in order to persist the values of the necessary Reactive Variables.