Directus Api Package

🧑‍🍳 What is Directus API?

Introduction

The internal @tanglemedia Directus API package is responsible for, creating services for your Directus API calls that at the end makes those calls closer to what a Fetch call would look like, that we recommend using as much as possible in your SvelteKit projects, since it makes the development of those directus API calls so much faster and easier to maintain.

Directus API Package

Services

Services is a simple abstraction layer that makes some assumptions around common api requests and responses. Sevices rely on an underlying adapter which is responsible for transforming the request/response payloads and handling the actual requests to an api. Once you have that you can create different services to handle different collections of your Directus project, here I am going to show three different services examples:

Directus Auth Service

        // DIRECTUS AUTH SERVICE
import { configureService } from '../../boot';
import { DirectusAuthServices } from '@tanglemedia/svelte-starter-directus-api';
import { createQuery, type Query, type QueryObserverOptions } from '@tanstack/svelte-query';

interface FilesInterface {
	id: string;
}

const authService = configureService(DirectusAuthServices, {
	path: '',
	transform: (data) => data,
	adapterKey: 'directus-auth'
});

// This is a specific service to have access to the base api functions, like find, create, update... that you get from the Core package, but also you get specific Auth functions like:
await authService.getToken();
// or
await authService.logout();
// or
await authService.getCurrentUser();
// or
await authService.updateCurrentUser();
// or
await authService.login(formValues.email, formValues.password);
// or
await authService.refresh();
// or
await authService.readFile(file);

Directus Static Auth Service

        // DIRECTUS STATIC SERVICE
import { configureService } from '../../boot';
import { DirectusStaticServices } from '@tanglemedia/svelte-starter-directus-api';

const staticService = configureService(DirectusStaticServices, {
	path: '',
	transform: (data) => data,
	adapterKey: 'directus-static'
});

// This is a specific service to have access to the base api functions, like find, create, update... that you get from the Core package, but also you get specific Static functions that you need the static token from Directus:
await authService.createUser(userData);

Directus Client Service

        // DIRECTUS CLIENT SERVICE
import type { FormInterface, FormResultInterface } from '$lib/models/form';
import { createQuery, type Query, type QueryObserverOptions } from '@tanstack/svelte-query';
import { configureService } from '../../boot';
import { ServiceAbstract } from '@tanglemedia/svelte-starter-core';

class Forms extends ServiceAbstract {}
class FormResults extends ServiceAbstract {}

export type FormsQuery = Query<FormInterface>;
export type FormResultsQuery = Query<FormResultInterface>;

type CreateOpt = {
	enabled?: QueryObserverOptions['enabled'];
};

export const formsServiceClient = configureService<FormInterface>(Forms, {
	// path is the name of your collection in Directus
	path: 'forms',
	transform: (data) => data,
	adapterKey: 'directus-client'
});

export default formsServiceClient;

// This is a specific service to have access to the base api functions, like find, create, update... that you get from the Core package, example:
form = await formsServiceClient
	.findOne(params.id, { fields: ['name', 'description'] })
	.then((res) => res.data);

🧑‍🍳 What is Directus API?

# Introduction

# Services

# Directus Auth Service

# Directus Static Auth Service

# Directus Client Service

On this page

Introduction

Services

Directus Auth Service

Directus Static Auth Service

Directus Client Service