npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

openapi2typescript

v0.2.1

Published

Supporting lib for [openapi2typescript-cli](../openapi2typescript-cli/README.md).

Downloads

288

Readme

openapi2typescript

Supporting lib for openapi2typescript-cli.

Installing

See openapi2typescript-cli

Usage

Once you have this library installed and your schema generated you can use this library to connect your request library and start validating. Currently only react-fetching-library is supported, but more are welcome.

Using without connecting

You can directly given the example on the cli README you can import the types directly and use them to run your validations when you get the data.

import { Fruit } from 'cli-output.ts';

// ... server response is in payload

const result = Fruit.safeParse(payload);
if (result.success) {
    // result.data has the validated type
} else {
    // result.error contains the error
}

You can check more information on how to use these types at zod.

Connecting with react-fetching-library

To properly connect, you have pass the validateSchemaResponseInterceptor to the list of response interceptors when creating the client:

import { createClient } from 'react-fetching-library';
import { validateSchemaResponseInterceptor } from 'openapi2typescript/react-fetching-library';

const client = createClient({
    responseInterceptors: [ validateSchemaResponseInterceptor ]
});

// Then you can pass this client to the ClientContextProvider (as you would normally do)

Now all the queries will yield a ValidatedResponse that has the type, status, value and errors found. This response will take into account all the possible values that the query could return (depending on their openapi spec).

If all the options are exhausted, a console.error will happen with the information.

Going back to our example we can see that our DELETE endpoint returns on status 200 a SetFruit and on status 400 a Message. Given that, we can do the following:

import { Fruit } from 'cli-output.ts';

// Inside the React component
const mutation = useMutation(actionDeleteFruits);

// Inside a click handler or similar?
const response = await mutation.mutate({
  body: {
    name: 'Apple',
    description: 'Yummy'
  }
}); 
if (response.payload?.type === 'SetFruit') {
  // type is SetFruit, this means that the validation succeded for this type (of all the possible responses for this call)
  // Our value is on response.payload.value
} else {
  // type is something else, in this particular case it means it could be a "Message" or "unknown" (none of the know responses)
  if (response.payload?.type === 'Message') {
  } else {
    // No other options for this query... We could process this as unknown error. And actually IT IS, the openapi didn't 
    // yield other options.
  }
}

// We can also check by the status, but always the status of the payload.
if (response.payload?.status === 200) {
  // status is 200, for this query, it means that the type is a SetFruit
} else if (response.payload?.status === 400) {
  // status 400 means a Message
} else {
  // Something else... response.payload?.type === 'unknown' and response.payload?.status is undefined.
  // All validations failed
}

More

Transform ValidatedResponse

Some helpers are provided (validatedResponse and validationResponseTransformer) to help you transform your ValidatedResponse, use cases of this is if you want to parse some received data to a more specific data. If not done correctly, you could lose the type safety of the status and type as they will be cast to any or string.

One way to correctly transform them is as follows:

import { validatedResponse, validationResponseTransformer } from 'openapi2typescript';
// Response is a concrete type of ValidatedResponse

const transformResponse = validationResponseTransformer((r: Response) => {
  if (r.type === 'RawFooBar') {
    return validatedResponse(
      'FooBar',
       r.status,
       transformRawFooBarToFooBar(r.value),
       r.errors
    );
  }

  return r;
});

With this, the value return from transformResponse will replace the type RawFooBar with FooBar without changing anything else and updating the type correctly.

Suppress errors

Every time all the options fail to validate when using the react-fetching-library plugin, a console.error will happen with useful info to know what happened. If using alongside tests, this could be noisy, that's why a suppressValidateError function is provided to knowingly suppress the specified number of times.