TypeScript

Using types for JSON:API responses

We have included a few types you can use to properly type your JSON:API responses:

DrupalNode

Retrieving an `article` node by id:

import { DrupalNode } from "next-drupal"


const node = await getResource<DrupalNode>(
  "node--article",
  "e96869cb-2b58-4863-ba18-1480f6696bb9"
)

Retrieving a `news` node by path:

import { DrupalNode } from "next-drupal"


const node = await getResourceByPath<DrupalNode>("/path/to/news")

Retrieving a collection of `articles` from context:

import { DrupalNode } from "next-drupal"


const articles = await getResourceCollectionFromContext<DrupalNode[]>(
  "node--article",
  context
)

Available types

  • `DrupalNode`
  • `DrupalMedia`
  • `DrupalTaxonomyTerm`
  • `DrupalBlock`
  • `DrupalUser`
  • `DrupalMenuLinkContent`

You can see a list of type definitions here.

getStaticProps

You can use the type definition to type your getStaticProps responses as follows:

pages/index.tsx

import {
  getPathsFromContext,
  getResourceCollectionFromContext,
  DrupalNode,
} from "next-drupal"


interface BlogPageProps {
  nodes: DrupalNode[] 
}


export default function BlogPage({ nodes }: BlogPageProps) {
  return // .....
}


export async function getStaticProps(
  context
): Promise<GetStaticPropsResult<BlogPageProps>> {
  const nodes = await getResourceCollectionFromContext<DrupalNode[]>(
    "node--article",
    context
  )


  return {
    props: {
      nodes,
    },
  }
}
JSON:API ParamsInline Images