{"id":138,"date":"2019-08-17T15:54:40","date_gmt":"2019-08-17T15:54:40","guid":{"rendered":"https:\/\/raminahmadi.co.uk\/?p=138"},"modified":"2025-07-11T16:25:03","modified_gmt":"2025-07-11T16:25:03","slug":"implementing-repository-pattern-with-sharepoint-component-library","status":"publish","type":"post","link":"https:\/\/codingwithramin.com\/?p=138","title":{"rendered":"Implementing Repository Pattern with SharePoint Framework Library Component"},"content":{"rendered":"\n

SharePoint framework 1.9.1 is out and Library Components are now generally available, Library component gives you ability to share code between your components.<\/p>\n\n\n\n

In this post I’m going to implement a basic version of repository pattern that allows you to do CRUD operations on SharePoint lists and libraries as well as tenant properties (global properties that can be shared between your components such as web parts, extensions and libraries).<\/p>\n\n\n\n

If you don’t want to read the post, the source code is available here<\/a>.<\/p>\n\n\n\n

Upgrade to SPFx 1.9.1 Version <\/h2>\n\n\n\n

Before we go further, make sure you upgrade your packages to SPFx 1.9.1, for more details please click here<\/a>.<\/p>\n\n\n\n

Create Library Component Type <\/h2>\n\n\n\n

Open PowerShell or command prompt and run Yeoman SharePoint Generator to create the solution.<\/p>\n\n\n\n

yo @microsoft\/sharepoint<\/pre>\n\n\n\n
Solution Name: <\/strong>ts-repository-libaray<\/p>\n\n\n\n
Target for component:<\/strong> SharePoint\nOnline only (you can select other options based on your needs)<\/p>\n\n\n\n
Place of files:<\/strong> We\nmay choose to use the same folder or create a subfolder for our solution.<\/p>\n\n\n\n
Deployment option:<\/strong> Y<\/p>\n\n\n\n
Permissions to access web APIs:<\/strong> N\n(as our solution doesn’t require permissions to access web APIs)<\/p>\n\n\n\n
Type of client-side component to create:<\/strong> Library<\/p>\n\n\n\n
Creating Code Files <\/h2>\n\n\n\n
Open the solution with Visual Studio Code or any other editors, under repository folder create below structure:<\/p>\n\n\n\n
\"files-structure\"<\/figure>\n\n\n\n
Interfaces <\/h2>\n\n\n\n
We are going to create these interfaces under core folder:<\/p>\n\n\n\n
IRead<\/strong>: defines the contacts for reading entities.<\/p>\n\n\n\n
import IQueryOption from \".\/IQueryOption\";\n\nexport interface IRead<T> {\n  getAll(): Promise<T[]>;\n  getOne(id: number | string,options?:IQueryOption): Promise<T>; \n}<\/pre>\n\n\n\n
IWrite<\/strong>: contracts for add,update or delete entities.<\/p>\n\n\n\n
export interface IWrite<T> {\n    add(item: T): Promise<any>;\n    update(item: T): Promise<any>;\n    delete(id: number | string): Promise<void>;\n}<\/pre>\n\n\n\n
IQuery<\/strong>: queries we are going to implement to get data.<\/p>\n\n\n\n
import { CamlQuery } from \"@pnp\/sp\/src\/types\";\nimport IQueryOption from \".\/IQueryOption\";\n\nexport default interface IQuery<T>{\n    getItemsByCAMLQuery:(query: CamlQuery, ...expands: string[])=> Promise<T[]>;\n    getItemsByQuery:(queryOptions: IQueryOption)=>Promise<T[]>;\n}<\/pre>\n\n\n\n
IQueryOption<\/strong>: provides options to filter, expand, select, number of items to return etc.<\/p>\n\n\n\n
export default interface IQueryOption{\n    select?: string[];\n    filter?:string;\n    expand?:string[];\n    top?:number;\n    skip?:number;\n}<\/pre>\n\n\n\n
IListItem<\/strong>: describe the basic properties of SharePoint list items.<\/p>\n\n\n\n
export default interface IListItem{\n    Id:number;\n}<\/pre>\n\n\n\n
ITenantProperty<\/strong>: tenant property keys.<\/p>\n\n\n\n
export interface ITenantProperty {\n  key: string;\n  Comment?: string;\n  Description?: string;\n  Value: string;\n}<\/pre>\n\n\n\n
SharePoint repository <\/h2>\n\n\n\n
Under SharePoint folder we have two files:<\/p>\n\n\n\n
ISharePointBaseRepository<\/strong>: this interface implements IRead, IWrite and IQuery, it’s always recommended to seperate the responsibilities, if you are not familiar with SOLID principles I suggest you this post<\/a>.<\/p>\n\n\n\n
\/\/ import all interfaces\nimport { IWrite } from '..\/core\/IWrite';\nimport { IRead } from '..\/core\/IRead';\nimport IListItem from '..\/core\/IListItem';\nimport IQuery from '..\/core\/IQuery';\n\/\/ that class only can be extended\nexport interface ISharePointBaseRepository<T extends IListItem> extends IWrite<T>, IRead<T>,IQuery<T> {\n\n}<\/pre>\n\n\n\n
SharePointBaseRepository<\/strong>: concrete class that implements the ISharePointBaseRepository interface.<\/p>\n\n\n\n
import { sp, ItemAddResult, ItemUpdateResult, List, SPRest, Web } from \"@pnp\/sp\";\nimport { ISharePointBaseRepository } from \".\/ISharePointBaseRepository\";\nimport IListItem from \"..\/core\/IListItem\";\nimport IQueryOption from \"..\/core\/IQueryOption\";\n\nexport default class SharePointRepository<T extends IListItem> implements ISharePointBaseRepository<T>{\n    protected _list: List;\n    protected _web: Web;\n    protected _sp: SPRest;\n\n    constructor(listId: string, webUrl?: string) {\n        this._web = webUrl ? new Web(webUrl) : this._web = sp.web;\n        this._list = this._web.lists.getById(listId);\n        this._sp = sp;\n    }\n\n    \/\/ Add new entity to collection\n    public async add(item: Omit<T, \"Id\">): Promise<ItemAddResult> {\n        return this._list.items.add(item);\n    }\n\n    \/\/ Update an existing entity\n    public async update(item: T): Promise<ItemUpdateResult> {\n        const updatingItem: Omit<T, \"Id\"> = item;\n        return this._list.items.getById(item.Id).update(updatingItem);\n    }\n\n    \/\/ Remove an entity\n    public async delete(id: number): Promise<void> {\n        return this._list.items.getById(id).delete();\n    }\n\n    \/\/ Get all items\n    public async getAll(): Promise<T[]> {\n        try {\n            const items = await this._list.items.getAll();\n            return items;\n        }\n        catch (error) {\n            return Promise.reject(error.message);\n        }\n    }\n\n    \/\/ Get one by Id, optional query options\n    public async getOne(id: number, queryOptions?: Omit<IQueryOption, \"top\" | \"filter\">): Promise<T> {\n        let result = this._list.items.getById(id);\n        if (queryOptions) {\n            if (queryOptions.expand)\n                result = result.expand(...queryOptions.expand);\n            if (queryOptions.select)\n                result = result.select(...queryOptions.select);\n        }\n        try {\n            const item = await result.get();\n            return item;\n        }\n        catch (error) {\n            return Promise.reject(error.message);\n        }\n    }\n\n    \/\/ Get items using CAML query\n    public async getItemsByCAMLQuery(query: import(\"@pnp\/sp\").CamlQuery, ...expands: string[]): Promise<T[]> {\n        return this._list.getItemsByCAMLQuery(query, ...expands);\n    }\n\n    \/\/ Get items using query options\n    public async getItemsByQuery(queryOptions: IQueryOption): Promise<T[]> {\n        const { filter, select, expand, top, skip } = queryOptions;\n        let result = this._list.items;\n        if (filter) result = result.filter(filter);\n        if (select) result = result.select(...select);\n        if (expand) result = result.expand(...expand);\n        if (top) result = result.top(top);\n        if (skip) result = result.skip(skip);\n        return result.get();\n    }\n}<\/pre>\n\n\n\n