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

qlboost

v1.0.1

Published

adds new features to graphql like arg resolvers and more.

Downloads

2

Readme

What is this ?

This repo addes additional features to graphql exports such as GraphQLObjectType args resolvers, fields/args as arrays, extending GraphQLObjectType types and more. This repo has graphql >=15.8.0 package as an optional peer dependency, so make sure you have graphql installed through:

npm install --save graphql

GraphQLField

A function that takes a config object as param and returns a GraphQLFieldConfig object.

The config param object provides resolvers to args and supports args as an array of objects with an additional name property.

Args as an array

Can accept args as an array of objects. GraphQL Nested objects syntax will still work. Can be a function that returns an object or an array.

Arg Resolver

Of Type Function: ( value , args , context , info ) : any | Promise<any>

|Param|Type|Description| |-------|----|-----------| |value|any|the arg value, same as args.argkey| |args|object|the whole args object|

new GraphQLObjectType({
    name:"Query",
    fields:()=>({
        findItems:GraphQLField({
            type:new GraphQLList(ItemType),
            args:[
                {
				    name:"query",// required to play the role of the key
					type:new GraphQLNonNull(GraphQLString),
					resolve:(value,args,context,info)=>{
						/* Just for the sake of the example.
						The resolver can be async.
						You can throw erros too.
						Must return the new value, can't just set
						manually the args object otherwise the value
						will be undefined.
						*/
						return value.trim();
					},
			    },
		    ],
        }),
    }),
});

Just go to any GraphQLField and

GraphQLObject

A function that takes a GraphQLObjectTypeConfig object as param and returns a new GraphQLObjectType instance with the provided config object.

Fields as an array

Can accept an array of objects as fields, same logic above. No need to wrap fields in a GraphQLField (Function above) as it's done under the hood.

export default GraphQLObject({
    name:"Product",
    fields:[
        {name:"id",type:GraphQLID},
        {
            name:"name",
            type:GraphQLString,
            resolve:(parent)=>{
	            const {name}=parent;
	            return name.toLowerCase();
            },
        },
        {name:"description",type:GraphQLString},
        
    ],
});

The name property is playing the role of the key in the fields object.

toArgType Method

In some cases a graphql object type is needed to be used as an Output and Input type. Instead of redefining an Output type from scratch, you can use the toArgType method of the object returned by the GraphQLObject function to create an GraphQLInputType. |Param|Type|Description| |-------|------|-------| |name|Optional String|The Input type name. Default to the object name with "Arg" as a suffix|

GraphQLObject({
	name:"Querier",
	fields:()=>[
		{
			name:"placeOrder",
			type:new  GraphQLList(ItemType),
			args:[{
				name:"items",
				type:new  GraphQLList(ItemType.toArgType()),
			}],
			resolve:(parent,args)=>args.items,
		},
	],
});

extendObjectType

Extends a GraphQLObjectType. |Param|Type|Description| |-----|----|-----------| |type|GraphQLObjectType | ()=>GraphQLObjectType|The graphql object type to extend| |config|Object|Type config|

const PersonType=new GraphQLObjectType({
    name:"Person",
    fields:()=>({
	    name:{type:GraphQLString},
	    birthdate:{type:GraphQLString},
    }),
});
const UserType=extendObjectType(()=>PersonType,{
    name:"User",
    fields:[
	    {name:"id",type:GraphQLID},
    },
});

The UserType will have as fields: name, birthdate and id.

Query

Stringify

Stringifies a javascript object into a graphql query object. Useful when you need to send graphql requests manually without using the apollo client. |Param|Type|Description| |------|----|------------| |value|any|value to parse| |options|object|stringification options|

|Option|Type|Description| |------|----|-----------| |spread|boolean|default to false

const sendOrderRequest=(items)=>fetch(<graphql endpoint>,{
    method:"POST",
    body:{
	    query:`mutation {
		    placeOrder(items:${Query.stringify(items)}){
			    id,date,time
		    }
	    }`,
    },
});

JSON.stringify won't work in this case, as the graphql items arg looks like a json but it's actually not as the quoted JSON keys are not valid graphql query.

Using The spread option

Considering this object :

const data={
    id:"id",
    name:"name",
};

With spread false, stringify returns the string :

{id:"id",name:"name"}
    

With spread true, stringify returns the string :

id:"id",name:"name"

Same goes for arrays

that is useful when you need to send a set of args in a graphql query field :

`{
    findItems:(${Query.stringify({
	    query:"am",
	    minAge:5,
    },{spread:true})}){
	    id,name,
    }
}`

Well in this case, it is not that useful, but in real world scenarios, the args can be more than two or even dynamic.

GraphQLDate

A predefined GraphQL object usable as a graphql field/arg inside a GraphQLObject config.

Config param options :

|Name|Type|Description| |----|----|-----------| |key|string|The value key in the parent object. Required when the type is used as a field| |seperator|"/" "." "-" "," or scape|Date components separator| |prettify|boolean|make sure days, months and years are respectively in "dd","mm","yyyy" format| |format|"dmy" "ymd" "mdy"|returned date format| |srcFormat|"dmy" "ymd" "mdy"|The original value format. Only required when the original value is of type string| |required|boolean|sets GraphQLNonNull type. Only when used as an arg|

As field :

GraphQLObject({
    name:"Person",
    fields:()=>({
	    name:{type:GraphQLString},
	    birthdate:GraphQLDate({
		    key:"birthdate",
		    required:true,
		    prettify:true,
	    }),
    }),
});
//or
GraphQLObject({
    name:"Person",
    fields:()=>[
	    {name:"name",type:GraphQLString},
	    GraphQLDate({
		    name:"birthdate",
		    key:"birthdate",
		    required:true,
		    prettify:true,
	    }),
    ],
});

Same for GrapthQLTime

How to use it ?

Just install the package using npm or any package manager of your choice :

npm install --save qlboost

To use it in a webpack environment without installing the graphql package, add the config below to your webpack configuration:

{
    plugins:[
	    new webpack.IgnorePlugin({
		    resourceRegExp:/^graphql$/,
		}),
	],
}