Configuration

Initialization and options for DrupalClient.


⚠️

The `DrupalClient` is available in `next-drupal ^1.3.0` as experimental.

Initialization

To create a new `DrupalClient`, use the following initialization:

import { Experimental_DrupalClient as DrupalClient } from "next-drupal"
const drupal = new DrupalClient(process.env.NEXT_PUBLIC_DRUPAL_BASE_URL)

Where `NEXT_PUBLIC_DRUPAL_BASE_URL` is the URL to your Drupal site defined as enviroment variable.

.env.local

NEXT_PUBLIC_DRUPAL_BASE_URL=http://example.com

Options

Additional options can be passed during initialization to customize the behaviors of the client.

apiPrefix

  • Default value: `/jsonapi`
  • Required: No

The JSON:API prefix to use. If you are using the JSON:API Extras module, you can customize the JSON:API prefix and set the custom value here.

new DrupalClient(process.env.NEXT_PUBLIC_DRUPAL_BASE_URL, {
apiPrefix: "/api",
})

frontPage

  • Default value: `/home`
  • Required: No

Use this to set the path for your front page. This path will resolve to `/` on your Next.js site.

new DrupalClient(process.env.NEXT_PUBLIC_DRUPAL_BASE_URL, {
frontPage: "/front",
})

serializer

  • Default value: Built-in
  • Required: No

Override the default data serializer. You can use this to add your own JSON:API data deserializer.

import { Deserializer } from "jsonapi-serializer"
const customSerializer = new Deserializer({
keyForAttribute: "camelCase",
})
new DrupalClient(process.env.NEXT_PUBLIC_DRUPAL_BASE_URL, {
serializer: customSerializer,
})

You can find more info about using a custom serializer here.


fetcher

  • Default value: `fetch`
  • Required: No

Override the default fetcher.

import crossFetch from "cross-fetch"
const customFetcher = (url, options) => {
const { withAuth, ...opts } = options
if (withAuth) {
// Make additional requests to fetch a bearer token
// Or any other Authorization headers.
}
return crossFetch(url, {
...opts,
})
}
new DrupalClient(process.env.NEXT_PUBLIC_DRUPAL_BASE_URL, {
fetcher: customFetcher,
})

You can find more info about using a custom fetcher here.


cache

  • Default value: `null`
  • Required: No

Implement a custom cache for caching data during builds.

import { DataCache } from "next-drupal"
import Redis from "ioredis"
const redis = new Redis(process.env.REDIS_URL)
export const redisCache: DataCache = {
async set(key, value) {
return await redis.set(key, value)
},
async get(key) {
return await redis.get(key)
},
}
new DrupalClient(process.env.NEXT_PUBLIC_DRUPAL_BASE_URL, {
cache: redisCache,
})

You can find more info about using a custom cache here.


auth

  • Default value: `null`
  • Required: No

Override the default auth. You can use this to implement your own custom auth.

`auth` accepts a `clientId` and `clientSecret` or a function that returns an `Authorization` header.

export const drupal = new DrupalClient(
process.env.NEXT_PUBLIC_DRUPAL_BASE_URL,
{
auth: () =>
"Basic " +
Buffer.from(
`${process.env.BASIC_AUTH_USERNAME}:${process.env.BASIC_AUTH_PASSWORD}`
).toString("base64"),
}
)

You can find more info about using a custom auth here.


logger

  • Default value: `console`
  • Required: No

Implement a custom logger. You can use this to send logs to a third-party service.


withAuth

  • Default value: `false`
  • Required: No

Set whether the client should use authenticated requests by default. If set to `true`, all calls to Drupal will use auth. You should configure `auth`.


useDefaultResourceTypeEntry

  • Default value: `false`
  • Required: No

By default, the client will make a request to JSON:API to retrieve the index. You can turn this off and use the default entry point from the resource name.


previewSecret

  • Default value: `null`
  • Required: No

The secret to use for preview mode.


headers

  • Default value: `{ "Content-Type": "application/vnd.api+json", Accept: "application/vnd.api+json" }`
  • Required: No

Set custom headers for the fetcher.

new DrupalClient(process.env.NEXT_PUBLIC_DRUPAL_BASE_URL, {
headers: {
"Content-Type": "application/json",
},
})

accessToken

  • Default value: `null`
  • Required: No

A long-lived access token you can set directly on the client.


debug

  • Default value: `false`
  • Required: No

Use this to turn on the built-in logger. If you would like to replace with your own logger, see #logger .


forceIframeSameSiteCookie

⚠️

Use `forceIframeSameSiteCookie` in development only.

  • Default value: `false`
  • Required: No

If you're running your site in development and the host address is different from the iframe preview, you might run into issues with `SameSite` cookies.

You can use this option to force the cookie to be set to `SameSite=None,Secure` in development.

export const drupal = new DrupalClient(
process.env.NEXT_PUBLIC_DRUPAL_BASE_URL,
{
forceIframeSameSiteCookie: process.env.NODE_ENV === "development",
}
)

For more info see: https://github.com/vercel/next.js/discussions/32238