# Notifications screen - Mon+Tues 12th-13th Sept, 2020

On Monday, I completed the notifications preferences page where users can enable or disable push notifications. I abstracted each `Preference` into its own component taking the following props:

interface PreferenceProps {
    label: string
    value: boolean
    onChange: (value: boolean) => void
    loading: boolean
    variant?: 'parent' | 'child'
}

On Tuesday, I stated creating an "Alert" page that will show a notification feed.

In another project, I upgraded Apollo Client to v3. As we have so many existing cache update functions, resolvers, etc written for Apollo Client 2, it is important to maintain backwards compatibility.

Apollo's `writeData` type has been removed in 3, so I tried to use [decleration merging](https://www.typescriptlang.org/docs/handbook/declaration-merging.html) to augment the `@apollo/client` types.

This is something I've previously done with C+, but it was not so smooth with this project, perhaps because this is part of a monorepo?

import { Cache, DataProxy, DocumentNode, Reference, StoreObject, Transaction } from '@apollo/client'

declare module '@apollo/client' {
    export declare abstract class ApolloCache<TSerialized> implements DataProxy {
        abstract read<T, TVariables = any>(query: Cache.ReadOptions<TVariables>): T | null
        abstract write<TResult = any, TVariables = any>(
            write: Cache.WriteOptions<TResult, TVariables>
        ): Reference | undefined

        abstract diff<T>(query: Cache.DiffOptions): Cache.DiffResult<T>
        abstract watch(watch: Cache.WatchOptions): () => void
        abstract reset(): Promise<void>
        abstract evict(options: Cache.EvictOptions): boolean
        abstract restore(serializedState: TSerialized): ApolloCache<TSerialized>
        abstract extract(optimistic?: boolean): TSerialized
        abstract removeOptimistic(id: string): void
        abstract performTransaction(transaction: Transaction<TSerialized>, optimisticId?: string | null): void
        recordOptimisticTransaction(transaction: Transaction<TSerialized>, optimisticId: string): void
        transformDocument(document: DocumentNode): DocumentNode
        identify(object: StoreObject | Reference): string | undefined
        gc(): string[]
        modify(options: Cache.ModifyOptions): boolean
        transformForLink(document: DocumentNode): DocumentNode
        readQuery<QueryType, TVariables = any>(
            options: DataProxy.Query<TVariables>,
            optimistic?: boolean
        ): QueryType | null

        private getFragmentDoc
        readFragment<FragmentType, TVariables = any>(
            options: DataProxy.Fragment<TVariables>,
            optimistic?: boolean
        ): FragmentType | null

        writeQuery<TData = any, TVariables = any>(
            options: Cache.WriteQueryOptions<TData, TVariables>
        ): Reference | undefined

        writeFragment<TData = any, TVariables = any>(
            options: Cache.WriteFragmentOptions<TData, TVariables>
        ): Reference | undefined

        /** done to maintain backwards compatibility with Apollo Client 2. DO NOT USE writeData */
        writeData: (args: any) => void
    }
}

###### tags: `programmingjournal` `2020` `C+` `apolloclient` `declerationmerging` `notifications`