JSPM

  • Created
  • Published
  • Downloads 1
  • Score
    100M100P100Q43977F
  • License ISC

A react store that uses object relationship to automatically normalize and set in state and get data..

Package Exports

  • @jjmyers/api-store
  • @jjmyers/api-store/build/index.esm.js
  • @jjmyers/api-store/build/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@jjmyers/api-store) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

API store

WARNING: experimental.

Step 1.

// By default createRelationalObject() looks for
// the prop "id" to use as a primary key.
// Optionally, if "id" is not the primary key of the object, you can specify what to use as a primary key like this
/// const user = createRelationalObject("user", {pk: "number"}, { primaryKey: "pk" });

Define your objects and their relationship

const user = createRelationalObject("user", {
    id: "number",
    username: "string"
})

const product = createRelationalObject("product", {
    id: "number",
    name: "string"
})

const wishlist = createRelationalObject("wishlist", {
    id: "number",
})


user.hasOne(wishlist, "wishlist")
wishlist.hasMany(product, "products")


const store = createStore({
  relationalCreators: [
    user,
    product,
    wishlist
  ],

  // Used to identify an object that is upserted in the store.
  // Optionally, the object can contain a __identify__: "wishlist" field to identify what object it is
  // using the __identify__ will be faster.
  identifier: {
    user: o => "username" in o,
    product: o => "productName" in o,
    wishlist: o => "wishlistName" in o,
  }
});

Step 2.

Wrap you application in RelationalStoreProvider

<RelationalStoreProvider model={model} ></RelationalStoreProvider>

Step 4.

You're done!

Use the following to get and set data.

type From = "user" | "wishlist" | "product"

// Example useage
const query = useQuery<From, User, User>({
  
  // Optionally add a fetch to get data on mount
  fetch: () => GetData.request({user: 10}),

  // Select some data from the store
  select: {
    from: "user",
    where: { id: 10 },
    fields: ["id", "wishlist"],
    join: [{
      on: "wishlist",
      fields: ["id", "products"],
      join: [{ on: "products", fields: "*" }]
    }]
  }
})