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

@bornfight/aardvark

v2.0.0

Published

**Data consumption React hooks for JSON:API specification**

Downloads

5

Readme

Aardvark

Data consumption React hooks for JSON:API specification

codecov

TypeScript friendly

Install with the following command:

yarn add @bornfight/aardvark
or
npm install @bornfight/aardvark

GET hooks

useGet

Immediately fetches data when called. It returns fetched record, loading state and the operation name.

parameters:

  • actionHandler
  • id
  • includes (optional)

Usage example

const { 
  record: car,
  loading: carLoading,
} = useGet(carActionHandler, id, includes);

useGetAll

Immediately fetches data collection of an entity. Returns an array of fetched objects, loading state and the operation name

parameters:

  • actionHandler
  • JsonApiQuery (don't worry, we offer construction of the query too)

Usage example

const {  
  collection: cars,  
  loading: carsLoading,  
} = useGetAll(carActionHandler, carJsonApiQuery);

useGetControlled

Fetches single entity data on function call. It returns the fetch action, loading, record and the operation name. Similar to useGet

parameters:

  • actionHandler
  • id
  • includes (optional)

Usage example

const {  
 getSingle: getCar,  
 loading: getCarLoading,  
 record: car,
} = useGetControlled(carActionHandler, id, includes);

// call the exposed function
getCar();

useGetAllControlled

Fetches collection data on function call. It returns the fetch action, loading, record and the operation name. Similar to useGetAll

parameters:

  • actionHandler
  • JsonApiQuery

Usage example

const {
  getAll: getCars  
  collection: cars,  
  loading: carsLoading,  
} = useGetAllControlled(carActionHandler, carJsonApiQuery);

// call the exposed function
getCars();

Other hooks

usePost

Constructs a function used for POST requests. Returns create function, loading, record and operation name.

hook parameters:

  • actionHandler

create function parameters (pick one):

  • model object and includeNames:
    • model is connected to actionHandler's entity
    • includeNames determine the recognition of model's relationships. It is used with dot notation for nested relationships. E.g. includeNames=["car.owner.document"]

or

  • rawData object

Usage example with model param:

const {  
  create: createCar,  
  loading: createCarLoading,  
} = usePost(carActionHandler);

createCar({
  model: {
	type: "car",
	brand: "coolCarBrand",  
	color: "blue",  
	year: "2020",
	owner: {
	  id: "3"
	}
  },
  includeNames: ["owner"]

Usage example with rawData:

const {  
  create: createCar,  
  loading: createCarLoading,  
} = usePost(carActionHandler);

createCar({
  rawData: {
	data: {
	  attributes: {
	    type: "car",
		brand: "coolCarBrand",  
		color: "green",  
		year: "2020",
	  },
	  relationships: {
	    owner: {
  	      id: "3"
	    }
	  }
	}
  }

usePatch

Constructs a function used for PATCH requests. Returns update function, loading, record and operation name.

hook parameters:

  • actionHandler

update function parameters:

  • id
  • an object with: model and includeNames

Usage example

const {  
  update: updateCar,  
  loading: updateCarLoading,  
} = usePatch(carActionHandler);
updateCar(id, {  
  model: {  
  type: "car",  
  id,  
  brand: "hotCarBrand",  
  color: "red",  
  year: "2021",
 },
  includeNames: ["owner"],
}

useDelete

Constructs a function used for DELETE requests. Returns delete function, loading, record and operation name.

hook parameters:

  • actionHandler

delete function parameters:

  • id

Usage example

const {  
  deleteRecord: deleteCar,  
  loading: deleteCarLoading,  
} = useDelete(carActionHandler);

deleteCar("3");

ActionHandler

ActionHandler is used to define type of a resource, its endpoint and a selector. It creates actions for redux repending on the hook They are easy to write with the provided class.

Create actionHandler example:

// CarActionHandler.ts file

import { CarSelector } from "./CarSelector";  
import { CarJSONAModel } from "./types/CarJSONAModel";  
import { ApiActionHandler } from "../json-api-client/ApiActionHandler";  
  
class CarActionHandler extends ApiActionHandler<CarJSONAModel> {  
  constructor() {  
  super("car", "/cars", new CarSelector());  
 }}  
  
export const carActionHandler = new CarActionHandler();
// CarJSONAModel.ts file

import { JSONAModel } from "../../interfaces/JSONAModel";  
import { Car } from "../interfaces/Car";  
import { OwnerJSONAModel } from "./OwnerJSONAModel";  
  
export type CarJSONAModel = JSONAModel<Car, Relationships>;  
  
interface Relationships {  
  owner: OwnerJSONAModel;  
}
// CarSelector.ts file

import { CarJSONAModel } from "./types/CarJSONAModel";  
import { BaseApiSelector } from "../selectors/base/BaseApiSelector";  
  
export class CarSelector extends BaseApiSelector<CarJSONAModel> {  
  constructor() {  
  super("car");  
 }}