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

graphql-generate-flow-schema-assets

v1.0.0

Published

Generate Flow assets from GraphQL schema.

Downloads

25

Readme

graphql-generate-flow-schema-assets

A small lib to help generating various Flow assets from a GraphQL schema. It currently finds all enum and object types in your schema and outputs them both as JS constants and as Flow types.

The point of this lib is to:

  1. Make you rely on auto generated code straight from the source of truth (the schema), instead of hard coding constants into your code.
  2. Help type check and by that make your code resilient to change by providing a fully typed extraction of assets from your GraphQL schema.

Ideally, this lib is used in combination with saving your schema from your backend. Example in package.json:

"scripts": {
  ...
  "graphql:save-schema": "some-script-to-save-your-schema && npm run graphql:generate-assets",
  "graphql:generate-assets": "graphql-generate-flow-schema-assets -s path/to/schema.json --enums --object-types --enum-file-path ./src/constants/enums.js --object-types-file-path ./src/constants/object-types.js"
  ...

This way, your code always relies auto generated code 100% in sync with your backend. If something changes in a incompatible way in the schema, Flow will tell you since the generated types will change.

Installation

npm install -g graphql-generate-flow-schema-assets

Usage

All options can be seen by running:

graphql-generate-flow-schema-assets -h

Generating Enum constants

graphql-generate-flow-schema-assets -s path/to/schema.json --enums

This will generate a file containing all enums from your GraphQL schema both as types and as actual objects. This means that instead of doing:

if (user.status === 'Active') {
...

You can do:

import { UserStatuses } from '../path/to/enums.js';

if (user.status === UserStatuses.Active) {
...

...meaning it'll be type checked, auto completed by your editor/IDE, and all of that good stuff.

Generating Object types

graphql-generate-flow-schema-assets -s path/to/schema.json --object-types

This will generate a file containing all object types from your GraphQL schema both as types and as properties on one root object. This means that instead of doing:

if (userOrSomeOtherType.__typename === 'User') {
  ...

You can do:

import { ObjectTypes } from '../path/to/object-types.js';

if (userOrSomeOtherType.__typename === ObjectTypes.User) {
  ...

...meaning it'll be type checked, auto completed by your editor/IDE, and all of that good stuff.

Extra

The lib flow-enum-validator is well suited to work with the enum output of this library to help validate unknown strings to enums. An example:

// @flow
import { UserStatuses } from '../path/to/enums.js';
import { createEnumValidator } from 'flow-enum-validator';

// This will return a function that takes a string and returns if it's a valid part of the UserStatuses enum object, or void if it's not
const validateUserStatus = createEnumValidator(UserStatuses);

const userStatus = validateUserStatus(someRandomStringHere);
/**
 * Say UserStatuses is an object that looks like this: { Active: 'Active', Inactive: 'Inactive' }
 * Flow will now have refined userStatus to 'Active' | 'Inactive' | null | void.
 */

if (userStatus) {
  // userStatus is now 'Active' | 'Inactive'
}

Check out flow-enum-validator here for more info and examples.