bash
COPY
$ pip install drf-spectacular

settings.py
COPY
INSTALLED_APPS = [
    # ALL YOUR APPS
    'drf_spectacular',
]

# ...

REST_FRAMEWORK = {
    # YOUR SETTINGS
    'DEFAULT_SCHEMA_CLASS': 'drf_spectacular.openapi.AutoSchema',
}

bash
COPY
$ python manage.py spectacular --file schema.yml

bash
COPY
$ yarn add -D @openapitools/openapi-generator-cli

package.json
COPY
{
  "scripts": {
    "openapi:gen": "openapi-generator-cli generate -g typescript-axios -i path/to/schema.yml -o ./openapi"
  },
}

bash
COPY
$ yarn openapi:gen
yarn run v1.22.4
$ openapi-generator-cli generate -g typescript-axios -i path/to/schema.yml -o ./openapi
[main] INFO  o.o.codegen.DefaultGenerator - Generating with dryRun=false
...
/path/to/openapi/.openapi-generator/VERSION
✨  Done in 2.28s.

$ tree openapi
openapi
├── README.md
├── api.ts
├── base.ts
├── configuration.ts
├── git_push.sh
└── index.ts

0 directories, 6 files

typescript
COPY
type AnyType = Record<string, unknown>

api.ts
COPY
import axios from "axios"

import { ApiApiFactory as getEndpoints, Configuration } from "path/to/openapi"

const api = axios.create({
  // axios configure
})

const config = new Configuration({
  // some settings
})
export const endpoints = getEndpoints(config, `http://localhost:8000`, api)

typescript
COPY
import { endpoints } from "@scripts/api"

endpoints
  .apiSamplesList()
  .then((response) => {
    // 処理
  })
  .catch((error) => {
    console.log(error)
  })

endpoints
  .apiSamplesRetrieve(id)
  .then((response) => {
    // 処理
  })
  .catch((error) => {
    console.log(error)
  })

schema.sh
COPY
#!/bin/bash
yarn run openapi:gen

function insertTsNocheck() {
  echo '// @ts-nocheck' | cat - $1 > temp && \mv temp $1
}

cd frontend/static/openapi
insertTsNocheck api.ts
insertTsNocheck base.ts

json
COPY
{
  "pk": "xxx",
  "name": "sample",
  "user": {
    "pk": "yyy",
    "email": "[email protected]"
  }
}

serializers.py
COPY
from rest_framework import serializers
from drf_spectacular.utils import extend_schema_field
from typing import Any, Dict

from .models import User, Sample


class UserSerializer(serializers.ModelSerializer):
    class Meta:
        model = User
        fields = ('pk', 'email',)


class SampleSerializer(serializers.ModelSerializer):
    user = UserSerialzer

    class Meta:
        model = Sample
        fields = ('pk', 'name', 'user')

    @extend_schema_field(UserSerializer(many=False))
    def get_user(self, obj: User) -> Dict[str, Any]:
        return UserSerializer(instance=obj.user, many=False).data

views.py
COPY
from rest_framework import viewsets
from rest_framework.request import Request
from rest_framework.response import Response
from rest_framework.decorators import action
from drf_spectacular.utils import extend_schema
from typing import Dict, Any

from .models import Sample
from .serializers import SampleSerializer, UserSerializer


class SampleViewSet(viewsets.ModelViewSet):
    queryset = Sample.objects.all()
    serializer_class = SampleSerializer

    @extend_schema(
        responses={
            200: UserSerializer
        },
        methods=['GET',],
        summary="user",
    )
    @action(methods=['GET'], detail=True, url_path='user')
    def user(self, request: Request, pk: Optional[str] = None, **kwargs: Dict[str, Any]) -> Response:
        sample = self.get_object()
        return Response(
            UserSerializer(instance=sample.user).data
        )