Skip to content
DruxtJS DruxtJS

Use the Druxt client directly

Fetch resources and collections with DruxtClient, with or without Nuxt.

Before you start: this guide assumes a Drupal backend with Druxt enabled (see Getting started) and a reason to bypass the component layer: custom fetching, scripting, or non-Nuxt usage.

The DruxtClient is the communication layer between the frontend and the Drupal JSON:API. It provides methods to get JSON:API resources and collections of resources from the Drupal server using the Axios library.

It is plain JavaScript with no Vue or Nuxt requirement. Inside a Druxt site it is already there as this.$druxt; in any other Node process, install it and instantiate it yourself:

npm install druxt

Setup

The Client requires the baseUrl for your Drupal backend:

const { DruxtClient } = require('druxt');
const druxt = new DruxtClient('https://demo-api.druxtjs.org');

The UUIDs in the examples below are illustrative: the demo backend is reinstalled on every rollout, so its IDs change. List https://demo-api.druxtjs.org/jsonapi/node/page and take an id from the response before running them. Query a resource's fields rather than assuming names; Umami's body field, for one, is field_body, not body.

It also provides an options object to configure the client:

const druxt = new DruxtClient('https://demo-api.druxtjs.org', {
  axios: {
    headers: { 'X-Custom-Header': true },
  },
  endpoint: 'jsonapi',
});

See the API documentation for more details.

Getting a resource

The getResource method requires the resource type and id, and has an optional query and prefix parameter.

Get a page.

druxt.getResource('node--page', 'd8dfd355-7f2f-4fc3-a149-288e4e293bdd').then((resource) => {
  // Do the thing.
});

Get a page's title.

druxt
  .getResource('node--page', 'd8dfd355-7f2f-4fc3-a149-288e4e293bdd', 'fields[node--page]=title')
  .then((resource) => {
    // Do the thing.
  });

Get a translated page.

druxt
  .getResource('node--page', 'd8dfd355-7f2f-4fc3-a149-288e4e293bdd', undefined, 'es')
  .then((resource) => {
    // Do the thing.
  });

Getting a collection of resources

The getCollection method requires the resource type, and has an optional query and prefix parameter.

Get a collection of recipes.

druxt.getCollection('node--recipe').then((collection) => {
  // Do the thing.
});

Get the first 5 recipes.

druxt.getCollection('node--recipe', 'page[limit]=5').then((collection) => {
  // Do the thing.
});

Get the first 5 recipes in Spanish.

druxt.getCollection('node--recipe', 'page[limit]=5', 'es').then((collection) => {
  // Do the thing.
});

Getting all collections of a resource

The getCollectionAll method takes the same parameters as getCollection, and will return an array of all collections.

Get all recipes.

druxt.getCollectionAll('node--recipe').then((collections) => {
  for (const collection of collections) {
    for (const resource of collection.data) {
      // Do the thing.
    }
  }
});

Testing against fixtures

DruxtClient accepts an axios instance via options.axios, the same injection point Nuxt's plugin uses. Handing it an axios adapter that replays recorded JSON:API responses lets a test suite run with no backend at all.

A worked example

The monorepo's examples/node-client directory shows the client and druxt-schema in a standalone Node script (listing a backend's resource types, printing schemas, sampling content), with a Jest suite running against recorded fixtures through the axios injection point. It is an example of what you could build, not part of the framework. The package is private to the repository and not published to npm.

Where to go next