@datx/network

@datx/network

DatX is an opinionated data store for use with the MobX state management library. It features support for simple observable property definition, references to other models and first-class TypeScript support.

@datx/network is a datx mixin that adds a networking layer support. It can be used with any REST-like API and probably also other types of an API.

Basic usage

import { Collection, Model, Attribute } from '@datx/core';
import { BaseRequest, collection, setUrl } from '@datx/network';

class Person extends Model {
  public static type = 'person'; // Unique name of the model class

  @Attribute()
  public name: string; // A normal observable property without a default value

  @Attribute()
  public surname: string;

  @Attribute({ toOne: Person })
  public spouse?: Person; // A reference to a Person model

  @computed
  public get fullName() {
    // Standard MobX computed props
    return `${this.name} ${this.surname}`;
  }
}

class AppData extends Collection {
  public static types = [Person]; // A list of models available in the collection
}

const store = new AppData();

// Create a base request with a basic configuration (baseUrl and linked collection)
const baseRequest = new BaseRequest('https://example.com').pipe(collection(store));

// Create separate request points
const getPerson = baseRequest.pipe<Person>(setUrl('/people/{id}', Person));
const getPeople = baseRequest.pipe<Array<Person>>(setUrl('/people', Person));

// Pure JS loading
const peopleResponse = await getPeople.fetch();

// Loading in a React component
const PersonInfo = ({ userId }) => {
  const [response, loading, error] = getPerson.useHook({ id: userId });

  if (loading || error) {
    return null;
  }

  const user = response.data;

  return <div>{user.fullName}</div>;
};

Getting started

Note: @datx/network has a peer dependency to mobx@^4.2.0 or mobx@^5.5.0, so don't forget to install the latest MobX version:

npm install --save @datx/network mobx

Polyfilling

The lib makes use of the following features that are not yet available everywhere. Based on your browser support, you might want to polyfill them:

• Symbol.for
• Object.assign
• Array.prototype.find
• Promise
• Fetch API

How to add the polyfills. Note: Fetch API is not included in the polyfills mentioned in the Troubleshooting page. Instead, you need to add it as a separate library. If you don't have any special requirements (like server-side rendering), you can use the window.fetch polyfill.

API reference

• BaseRequest
• Response
• operators
• caching
• interceptors
• parse/serialize
• fetching
• TypeScript Interfaces

Troubleshooting

Having issues with the library? Check out the troubleshooting page or open an issue.

License

The MIT License

Credits

@datx/network is maintained and sponsored by Infinum.