App migrate pinia stores

app/src/sdk.ts

@@ -1,11 +1,11 @@
-import type { AuthenticationClient, DirectusClient, RestClient } from '@directus/sdk';
-import { createDirectus, rest, authentication } from '@directus/sdk';
+import type { AuthenticationClient, DirectusClient, GraphqlClient, RestClient } from '@directus/sdk';
+import { createDirectus, rest, authentication, graphql } from '@directus/sdk';
 import { getPublicURL } from '@/utils/get-root-path';
 import { ofetch, type FetchContext } from 'ofetch';
 import { useRequestsStore } from './stores/requests';
 import { requestQueue } from './api';
 
-export type SdkClient = DirectusClient<any> & AuthenticationClient<any> & RestClient<any>;
+export type SdkClient = DirectusClient<any> & AuthenticationClient<any> & RestClient<any> & GraphqlClient<any>;
 
 type OptionsWithId = FetchContext['options'] & { id: string };
 
@@ -48,9 +48,10 @@ const baseClient = ofetch.create({
 	},
 });
 
-export const sdk: SdkClient = createDirectus(getPublicURL(), { globals: { fetch: baseClient.native } })
+export const sdk: SdkClient = createDirectus(getPublicURL(), { globals: { fetch: baseClient } })
 	.with(authentication('session', { credentials: 'include', msRefreshBeforeExpires: 10_000 }))
-	.with(rest({ credentials: 'include' }));
+	.with(rest({ credentials: 'include' }))
+	.with(graphql({ credentials: 'include' }));
 
 export default sdk;
 

app/src/stores/collections.test.ts

@@ -37,7 +37,7 @@ test('parseField action should translate field name when translations are added
 	});
 
 	collectionsStore.collections = [mockCollectionWithTranslations].map(collectionsStore.prepareCollectionForApp);
-	expect(collectionsStore.collections[0].name).toEqual('Collection A en-US');
+	expect(collectionsStore.collections[0]!.name).toEqual('Collection A en-US');
 	expect(i18n.global.te(`collection_names.${mockCollection.collection}`)).toBe(true);
 
 	const mockCollectionWithMissingTranslations = merge({}, mockCollection, {
@@ -52,7 +52,7 @@ test('parseField action should translate field name when translations are added
 	});
 
 	collectionsStore.collections = [mockCollectionWithMissingTranslations].map(collectionsStore.prepareCollectionForApp);
-	expect(collectionsStore.collections[0].name).toEqual('A');
+	expect(collectionsStore.collections[0]!.name).toEqual('A');
 	expect(i18n.global.te(`collection_names.${mockCollection.collection}`)).toBe(false);
 });
 
@@ -71,7 +71,7 @@ test('parseField action should translate field name when all translations are re
 	});
 
 	collectionsStore.collections = [mockCollectionWithTranslations].map(collectionsStore.prepareCollectionForApp);
-	expect(collectionsStore.collections[0].name).toEqual('Collection A en-US');
+	expect(collectionsStore.collections[0]!.name).toEqual('Collection A en-US');
 	expect(i18n.global.te(`collection_names.${mockCollection.collection}`)).toBe(true);
 
 	const mockCollectionWithoutTranslations = merge({}, mockCollection, {
@@ -81,6 +81,6 @@ test('parseField action should translate field name when all translations are re
 	});
 
 	collectionsStore.collections = [mockCollectionWithoutTranslations].map(collectionsStore.prepareCollectionForApp);
-	expect(collectionsStore.collections[0].name).toEqual('A');
+	expect(collectionsStore.collections[0]!.name).toEqual('A');
 	expect(i18n.global.te(`collection_names.${mockCollection.collection}`)).toBe(false);
 });

app/src/stores/collections.ts

@@ -1,18 +1,26 @@
-import api from '@/api';
 import { COLLECTIONS_DENY_LIST } from '@/constants';
 import { i18n } from '@/lang';
 import { Collection } from '@/types/collections';
 import { getLiteralInterpolatedTranslation } from '@/utils/get-literal-interpolated-translation';
 import { notify } from '@/utils/notify';
 import { unexpectedError } from '@/utils/unexpected-error';
 import formatTitle from '@directus/format-title';
-import { Collection as CollectionRaw, DeepPartial, Field } from '@directus/types';
+import { Collection as CollectionRaw } from '@directus/types';
 import { getCollectionType } from '@directus/utils';
 import { isEqual, isNil, omit, orderBy } from 'lodash';
 import { defineStore } from 'pinia';
 import { computed, ref } from 'vue';
 import { useRelationsStore } from './relations';
 import { isSystemCollection } from '@directus/system-data';
+import {
+	DirectusCollection,
+	NestedPartial,
+	createCollection as createCollectionCmd,
+	deleteCollection as deleteCollectionCmd,
+	readCollections as readCollectionsCmd,
+	updateCollection as updateCollectionCmd,
+} from '@directus/sdk';
+import sdk from '@/sdk';
 
 export const useCollectionsStore = defineStore('collectionsStore', () => {
 	const collections = ref<Collection[]>([]);
@@ -53,9 +61,7 @@ export const useCollectionsStore = defineStore('collectionsStore', () => {
 	};
 
 	async function hydrate() {
-		const response = await api.get<any>(`/collections`);
-
-		const rawCollections: CollectionRaw[] = response.data.data;
+		const rawCollections = await sdk.request<CollectionRaw[]>(readCollectionsCmd());
 
 		collections.value = rawCollections.map(prepareCollectionForApp);
 	}
@@ -132,7 +138,7 @@ export const useCollectionsStore = defineStore('collectionsStore', () => {
 		});
 	}
 
-	async function upsertCollection(collection: string, values: DeepPartial<Collection & { fields: Field[] }>) {
+	async function upsertCollection(collection: string, values: NestedPartial<DirectusCollection<any>>) {
 		const existing = getCollection(collection);
 
 		// Strip out any fields the app might've auto-generated at some point
@@ -142,31 +148,28 @@ export const useCollectionsStore = defineStore('collectionsStore', () => {
 			if (existing) {
 				if (isEqual(existing, values)) return;
 
-				const updatedCollectionResponse = await api.patch<{ data: CollectionRaw }>(
-					`/collections/${collection}`,
-					rawValues,
-				);
+				const updatedCollectionResponse = await sdk.request<CollectionRaw>(updateCollectionCmd(collection, rawValues));
 
 				collections.value = collections.value.map((existingCollection: Collection) => {
 					if (existingCollection.collection === collection) {
-						return prepareCollectionForApp(updatedCollectionResponse.data.data);
+						return prepareCollectionForApp(updatedCollectionResponse);
 					}
 
 					return existingCollection;
 				});
 			} else {
-				const createdCollectionResponse = await api.post<{ data: CollectionRaw }>('/collections', rawValues);
+				const createdCollectionResponse = await sdk.request<CollectionRaw>(createCollectionCmd(rawValues));
 
-				collections.value = [...collections.value, prepareCollectionForApp(createdCollectionResponse.data.data)];
+				collections.value = [...collections.value, prepareCollectionForApp(createdCollectionResponse)];
 			}
 		} catch (error) {
 			unexpectedError(error);
 		}
 	}
 
-	async function updateCollection(collection: string, updates: DeepPartial<Collection>) {
+	async function updateCollection(collection: string, updates: NestedPartial<DirectusCollection<any>>) {
 		try {
-			await api.patch(`/collections/${collection}`, updates);
+			await sdk.request(updateCollectionCmd(collection, updates));
 			await hydrate();
 
 			notify({
@@ -181,7 +184,7 @@ export const useCollectionsStore = defineStore('collectionsStore', () => {
 		const relationsStore = useRelationsStore();
 
 		try {
-			await api.delete(`/collections/${collection}`);
+			await sdk.request(deleteCollectionCmd(collection));
 			await Promise.all([hydrate(), relationsStore.hydrate()]);
 
 			notify({

app/src/stores/extensions.ts

@@ -1,4 +1,3 @@
-import api from '@/api';
 import type { ApiOutput } from '@directus/extensions';
 import { APP_OR_HYBRID_EXTENSION_TYPES } from '@directus/extensions';
 import { isIn } from '@directus/utils';
@@ -7,6 +6,8 @@ import { defineStore } from 'pinia';
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useNotificationsStore } from './notifications';
+import { readExtensions, updateExtension } from '@directus/sdk';
+import sdk from '@/sdk';
 
 const getEnabledBrowserExtensions = (extensions: ApiOutput[]) => {
 	const enabledIds: string[] = [];
@@ -33,6 +34,8 @@ const getEnabledBrowserExtensions = (extensions: ApiOutput[]) => {
 	return enabledIds;
 };
 
+// TODO create actual SDK commands for these
+
 export const useExtensionsStore = defineStore('extensions', () => {
 	const notificationsStore = useNotificationsStore();
 	const { t } = useI18n();
@@ -48,8 +51,7 @@ export const useExtensionsStore = defineStore('extensions', () => {
 		const currentlyEnabledBrowserExtensions = getEnabledBrowserExtensions(extensions.value);
 
 		try {
-			const response = await api.get('/extensions');
-			extensions.value = response.data.data;
+			extensions.value = await sdk.request<ApiOutput[]>(readExtensions());
 
 			const newEnabledBrowserExtensions = getEnabledBrowserExtensions(extensions.value);
 
@@ -87,31 +89,46 @@ export const useExtensionsStore = defineStore('extensions', () => {
 
 		if (!extension) throw new Error(`Extension with ID ${id} does not exist`);
 
-		const current = extension.meta.enabled;
-		const endpoint = `/extensions/${id}`;
-
-		await api.patch(endpoint, { meta: { enabled: !current } });
+		await sdk.request(updateExtension(extension.bundle, extension.id, { meta: { enabled: !extension.meta.enabled } }));
 
 		await refresh();
 	};
 
 	const install = async (extensionId: string, versionId: string) => {
-		await api.post('/extensions/registry/install', { extension: extensionId, version: versionId });
+		await sdk.request(() => ({
+			path: '/extensions/registry/install',
+			method: 'POST',
+			body: JSON.stringify({ extension: extensionId, version: versionId }),
+		}));
+
 		await refresh();
 	};
 
 	const uninstall = async (extensionId: string) => {
-		await api.delete(`/extensions/registry/uninstall/${extensionId}`);
+		await sdk.request(() => ({
+			path: `/extensions/registry/uninstall/${extensionId}`,
+			method: 'DELETE',
+		}));
+
 		await refresh();
 	};
 
 	const reinstall = async (extensionId: string) => {
-		await api.post(`/extensions/registry/reinstall`, { extension: extensionId });
+		await sdk.request(() => ({
+			path: `/extensions/registry/reinstall`,
+			method: 'POST',
+			body: JSON.stringify({ extension: extensionId }),
+		}));
+
 		await refresh();
 	};
 
 	const remove = async (extensionId: string) => {
-		await api.delete(`/extensions/${extensionId}`);
+		await sdk.request(() => ({
+			path: `/extensions/${extensionId}`,
+			method: 'DELETE',
+		}));
+
 		await refresh();
 	};
 

app/src/stores/fields.test.ts

@@ -36,16 +36,14 @@ const mockField = {
 	},
 } as Field;
 
-vi.mock('@/api', () => {
+vi.mock('@/sdk', () => {
 	return {
 		default: {
-			get: (path: string) => {
+			request: (cfg: () => Record<string, any>) => {
+				const { path } = cfg();
+
 				if (path === '/fields') {
-					return Promise.resolve({
-						data: {
-							data: [mockField],
-						},
-					});
+					return Promise.resolve([mockField]);
 				}
 
 				return Promise.reject(new Error(`Path "${path}" is not mocked in this test`));
@@ -92,7 +90,7 @@ describe('parseField action', () => {
 		});
 
 		fieldsStore.fields = [mockFieldWithTranslations].map(fieldsStore.parseField);
-		expect(fieldsStore.fields[0].name).toEqual('Name en-US');
+		expect(fieldsStore.fields[0]!.name).toEqual('Name en-US');
 		expect(i18n.global.te(`fields.${mockField.collection}.${mockField.field}`)).toBe(true);
 
 		const mockFieldWithoutTranslations = merge({}, mockField, {
@@ -107,7 +105,7 @@ describe('parseField action', () => {
 		});
 
 		fieldsStore.fields = [mockFieldWithoutTranslations].map(fieldsStore.parseField);
-		expect(fieldsStore.fields[0].name).toEqual('Name');
+		expect(fieldsStore.fields[0]!.name).toEqual('Name');
 		expect(i18n.global.te(`fields.${mockField.collection}.${mockField.field}`)).toBe(false);
 	});
 
@@ -126,7 +124,7 @@ describe('parseField action', () => {
 		});
 
 		fieldsStore.fields = [mockFieldWithTranslations].map(fieldsStore.parseField);
-		expect(fieldsStore.fields[0].name).toEqual('name en-US');
+		expect(fieldsStore.fields[0]!.name).toEqual('name en-US');
 		expect(i18n.global.te(`fields.${mockField.collection}.${mockField.field}`)).toBe(true);
 
 		const mockFieldWithoutTranslations = merge({}, mockField, {
@@ -136,7 +134,7 @@ describe('parseField action', () => {
 		});
 
 		fieldsStore.fields = [mockFieldWithoutTranslations].map(fieldsStore.parseField);
-		expect(fieldsStore.fields[0].name).toEqual('Name');
+		expect(fieldsStore.fields[0]!.name).toEqual('Name');
 		expect(i18n.global.te(`fields.${mockField.collection}.${mockField.field}`)).toBe(false);
 	});
 });