use-record-set v0.2.0

Installation

Yarn:

yarn add use-record-set graphql-tag

npm:

npm install use-record-set graphql-tag

Usage

// ./useRecordSet.js

import { createRecordSet } from "use-record-set";

const schema = {
  Group: {
    meta: {
      singular: "group",
      plural: "groups",
    },
    fields: {
      name: {
        type: "String",
      },
      members: {
        type: "ForeignKey",
        cardinality: "manyToMany",
      },
    },
  },
  Person: {
    meta: {
      singular: "person",
      plural: "people",
    },
    fields: {
      name: {
        type: "String",
      },
      groups: {
        type: "Inverse",
        sources: [
          {
            type: "Group",
            field: "members",
          },
        ],
      },
    },
  },
};

const records = [
  {
    type: "Group",
    id: "3d6ff8ff-d23e-4421-bfe1-b2fabd1ccb8c",
    name: "Group A",
  },
  {
    type: "Person",
    id: "7de3a1cf-5f26-4c56-b453-5dd2a33697fc",
    name: "Person A",
  },
];

const { useRecordSet, updateRecordSet } = createRecordSet(schema, {
  init: records,
  persistence: "url",
  localStorageKey: "recordSet",
});

export { useRecordSet, updateRecordSet };

// ./index.js

import { useRecordSet, updateRecordSet } from "./useRecordSet";

const MyComponent = () => {
  const { group } = useRecordSet(
    gql`
      query ($id: String) {
        group(id: $id) {
          id
          name
          members {
            id
            name
            groups {
              id
              name
            }
          }
        }
      }
    `,
    { id: "3d6ff8ff-d23e-4421-bfe1-b2fabd1ccb8c" },
  );
  return (
    <ul>
      {group.members.map((member) => (
        <li
          key={member.id}
          onClick={() => {
            const result = updateRecordSet(
              gql`
                mutation ($source: String, $target: String) {
                  removeRelationship(field: "members", source: $source, target: $target) {
                    id
                  }
                }
              `,
              { source: group.id, target: id },
            );
            if (!result) {
              throw Error("Unable to remove relationship");
            }
          }}
        >
          {member.name}
          <ul>
            {member.groups.map((group) => (
              <li key={group.id}>{group.name}</li>
            ))}
          </ul>
        </li>
      ))}
    </ul>
  );
};