@draught/sdk

Autogenerated hooks for a Next API. Pairs well with @draught/gateway

Install

npm install @draught/sdk

Customization

To customize the codegen, add to your .draught file:

// All optional, default values shown
{
  "sdk": {
    "dir": "api",
    "errorTypeImport": "import { ErrorPayload } from 'lib/errors';",
    "output": "lib/sdk.ts"
  }
}

Usage

To generate the hooks:

npx generate-sdk

To use a query hook:

function MyApp() {
  // Sends a GET to the endpoint whose API function is named `getBlogPost`
  // Params are used to fill in any dynamic url segments first, then any
  // leftover are sent as query string params, i.e. /posts/123?expanded=true
  let blogPost = useGetBlogPost({ id: '123', expanded: true });
}

SSR & SSG

To leverage server-side rendering and static site generation (i.e. getServerSideProps and getStaticProps), use the prefetch function:

export const getServerSideProps = prefetch([
  // You can just pass the hook directly:
  useGetBlogPost,

  // Or you can supply params:
  [useGetBlogPost, { id: '123' }],

  // Params can also be a function, which will be given the ctx object:
  [useGetBlogPost, ctx => ({ id: ctx.params.id }),

  // You can also supply a guard function which, if it returns false, will skip
  // prefetching this hook
  [useGetBlogPost, {}, ctx => isLoggedIn(ctx)]
]);

You