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

ra-iri-jsonapi-client

v0.6.0

Published

Fork of JSON API data provider to work with api-platform for react-admin.

Downloads

2

Readme

ra-jsonapi-client

Build Status npm version

A JSONAPI compatible data provider for react-admin.

Features

Currently these actions are supported:

  • GET_LIST
  • GET_ONE
  • CREATE
  • UPDATE
  • DELETE
  • GET_MANY
  • GET_MANY_REFERENCE

Installation

# via npm
npm install ra-jsonapi-client

# via yarn
yarn add ra-jsonapi-client

Usage

Import this package, set the base url and pass it as the dataProvider to react-admin.

//in app.js
import React from "react";
import { Admin, Resource } from "react-admin";
import jsonapiClient from "ra-jsonapi-client";

const dataProvider = jsonapiClient('http://localhost:3000');

const App = () => (
  <Admin dashboard={Dashboard} dataProvider={dataProvider}>
    ...
  </Admin>
);

export default App;

Options

This client allows you to set some optional settings as the second parameter:

// Configure some settings.
const settings = { ... };

// Pass it as the second parameter after the base URL.
const dataProvider = jsonapiClient('http://localhost:3000', settings);

Total count

Since JSONAPI does not specify a standard for the total count key in the meta object, you can set it with:

const settings = { total: 'total-count' };

Which will work for:

{
  "data": { ... },
  "meta": {
    "total-count": 436
  }
}

If this option is not set it will fall back to total.

Custom HTTP headers

Custom headers can be set by providing a headers object in options:

const settings = {
  headers: {
    Authorization: 'Bearer ...',
    'X-Requested-With': 'XMLHttpRequest'
  }
}

The default value is:

{
  Accept: 'application/vnd.api+json; charset=utf-8',
  'Content-Type': 'application/vnd.api+json; charset=utf-8',
}

Authentication

This client assumes that you are using an authProvider for your react-admin application. In order to use authentication with your backend your authProvider needs to store credentials in localStorage.

Basic auth

For basic auth your authProvider needs to store username and password like this:

localStorage.setItem('username', 'bob');
localStorage.setItem('password', 'secret');

Bearer Token

For authentication via (access) token your authProvider needs to store the token like this:

localStorage.setItem('token', '123token');

Update method (PUT vs. PATCH)

First versions used PUT as the default update HTTP method. In version 0.5.0 this was changed to PATCH since it complies with the JSONAPI standard.. You can still use PUT by declaring the update method in the settings:

{
  // Set the update method from PATCH to PUT.
  updateMethod: 'PUT'
}

Contributors