@tanglemedia/svelte-starter-directus-api

This package is experimental and is meant for internal use only.

Application

This is the entry point for initialing the application.

// boot/index.ts
import { createApplication } from '@tanglemedia/svelte-starter-core';
import { registerDirectusProvider } from '@tanglemedia/svelte-starter-directus-api';

const configuredApp = createApplication({
  provider: {
    // This register the directus provider, i.e, creates a directus service
    register: [registerDirectusProvider()]
  }
});

export default configuredApp;

export const { configureService, getConfiguration, application, provideConfig } = configuredApp;

Configuration file

This is the entry point for your Directus adapter configs, inside the api.yml file.

# This defines your default adapter
default: 'directus'

adapters:
  # These are each custom adapters you can set, the key name can be what ever you want
  directus-client:
    adapter: 'directus'
    configuration:
      host: $PUBLIC_DIRECTUS_HOST
      protocol: $PUBLIC_DIRECTUS_PROTOCOL
      auth:
        mode: 'json'
        config:
          storage: 'localStorage'
          autoRefresh: true
          msRefreshBeforeExpires: 30000
          credentials: 'include'

  directus-auth:
    adapter: 'directus'
    configuration:
      host: $PUBLIC_DIRECTUS_HOST
      protocol: $PUBLIC_DIRECTUS_PROTOCOL
      auth:
        mode: 'json'
        config:
          storage: 'localStorage'
          autoRefresh: true
          msRefreshBeforeExpires: 30000
          credentials: 'include'

  directus-static:
    adapter: 'directus'
    configuration:
      host: $PUBLIC_DIRECTUS_HOST
      protocol: $PUBLIC_DIRECTUS_PROTOCOL
      staticToken: $PUBLIC_DIRECTUS_ACCESS_TOKEN

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
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 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
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);

Breaking Changes

Migrating from 0.1.4 to 1.0.0

On this migration we removed completely some deprecated Service functions:

1. ApiAuthDirectus
2. ApiClientDirectus
3. LoadDirectusApiProvider
4. ApiStaticDirectus

These types of initializing Auth, Static, and Client Directus services won't work on new major version:

// LEGACY WAY - NOW DEPRECATED AND NOT SUPPORTED
import { ApiAuthDirectus } from '@tanglemedia/svelte-starter-directus-api';
import { getConfiguration } from '../boot';

let directus: ApiAuthDirectus;

const configApi = async () => {
  const config = await getConfiguration();
  const protocol: string = config.config(`api.adapters.directus.protocol`) || '';
  const host: string = config.config(`api.adapters.directus.host`) || '';
  const direcutsUrl = `${protocol}://${host}`.trim();
  directus = new ApiAuthDirectus(direcutsUrl, 'json');
};

async function getDirectus() {
  if (!directus) {
    await configApi();
  }
  return directus;
}

export { getDirectus };

// CURRENT WAY
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'
});

export default authService;

// LEGACY WAY - NOW DEPRECATED AND NOT SUPPORTED
import { getConfiguration } from '../boot';
import { LoadDirectusApiProvider } from '@tanglemedia/svelte-starter-directus-api';

const configApi = async () => {
  const res = await getConfiguration();
  return res;
};

const apiProvider = new LoadDirectusApiProvider(configApi, 'json');

export { apiProvider };

// CURRENT WAY
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: 'forms',
  transform: (data) => data,
  adapterKey: 'directus-client'
});

For mode demos and to check out all the components, please visit our documentation website