Use TypeScript to Synchronize Django REST Framework and Vue.js

Part I: Generating API Metadata

Image for post
Image for post

Background

When developing a web application, a common design pattern is to divide the project into two repositories: 1) the API, or “back end”, which handles database or service interaction (“back end”), and 2) the client, or “front end”, which handles user interaction.

Motivation

Resolving one API-client discrepancy is a time sink. Resolving multiple discrepancies is a time bathtub.

Image for post
Image for post
Photo by Iz & Phil on Unsplash
  • Variable casing, like firstName vs first_name
  • Which fields are required
  • Which options to show in select elements
  • Default field values
  • Min/max length requirements for text fields
  • Min/max value requirements for number fields
  • Regex patterns for text fields
  • Which fields are read-only

Metadata

Django REST Framework (DRF) has built-in support for generating metadata about API endpoints.

  • required: whether the field is required (it is)
  • read_only: whether the field is read-only (it isn’t)
  • label: a user-facing name (“title”)
  • max_length: the value’s maximum number of characters (100)
  • child: metadata about a ForeignKey’s to model or an ArrayField’s base field
  • min_length, max_value, min_value: other model field validations

Extending Metadata

Means and motive to muster more metadata.

DRF supports custom metadata classes, which can generate the metadata to show in an OPTIONS response — or offline, as we’ll see in a bit.

  • pattern: a Regex pattern a field’s value must match
  • format: the format of a string value, like email, uri, or uuid
  • field_name: a field’s name
  • write_only: whether a field should be written and not read

Exporting Metadata

To export metadata in a format that’s useful in a client code base, we’ll use APIMetadata to generate metadata for a User serializer, then write it to a JSON file.

Exporting a metadata JSON file from the Django shell
Metadata representing Django’s User model

Wrap-up

In this post, we looked at some of the pain points of maintaining a web application with a separate API and JavaScript client, and how we can use metadata to help keep a client in sync with its API.

Keyboarding Bluenoser with an eye for clean code, an ear for fusion, and a stomach for dougnuts.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store