How to remove orphaned/unused compositions

How to find compositions not attached to project map nodes using UI#

Sometimes you may have compositions in the project, which are no longer used anywhere, i.e. not attached to any project map node. Unless these are used directly in code, it is safe to delete them. There is a way to see which ones are not attached to a proect map node. When you create a new project map node, you can select an option to see existing compositions:

However, when you use the composition search, you can only search by fields and types. You can locate these composition by name and removed as needed.

How to find and remove compositions not attached to project map nodes#

If there is a big list or not obvious how to find those, please find a code example below. Here are the steps how you can get a list of compositions for a project and remove them:

Get the bearer token to be able to access the Uniform API directly. To do that, open the https://uniform.app/cli-login in the browser and press copy. Alternativly, you can also use Uniform API key, be specifying it as x-api-key header
Create a file like this under a project where you have .env defined with the needed Uniform project ID. Make sure to replace the Authorization header with the copied value like ‘Bearer <value>’

Please proceed with caution. This code removes the compositions without confirmation. It is highly recomended to make a backup of the project

Example TS code which can be executed as npx ts-node file.ts

import { CanvasClient } from '@uniformdev/canvas'; import dotenv from 'dotenv'; dotenv.config(); const getCompositions = async (authorizationHeader: string) => { const url = '<https://uniform.app/api/v1/canvas?skipPatternResolution=true&skipOverridesResolution=true&state=0&withComponentIDs=false&keyword=&pattern=false&orderBy=updated_at_DESC&offset=0&limit=5&withUIStatus=true&withProjectMapNodes=true&attachedToProjectMap=false&withTotalCount=true&projectId=e05ecb95-10f6-4e05-912c-41dceecf4304>'; try { const response = await fetch(url, { method: 'GET', headers: { Authorization: authorizationHeader, }, }); if (!response.ok) { throw new Error('Failed to fetch compositions'); } const data = await response.json(); const compositions = data.compositions.map( (composition: { composition: { _id: string } }) => composition.composition._id ); return compositions; } catch (error) { console.error('Error fetching compositions:', error); return []; } }; const main = async () => { const compositionIds = await getCompositions( // put your token here 'Bearer eyJhb...' ); console.log('Found', compositionIds.length, 'compositions'); console.log(compositionIds); const client = new CanvasClient({ apiKey: process.env.UNIFORM_API_KEY, projectId: process.env.UNIFORM_PROJECT_ID, }); compositionIds.forEach((compositionId: string) => { console.log('Removing', compositionId); client.removeComposition({ compositionId: compositionId }); }); console.log('done'); }; main();