Define Async Methods (Endpoints)

Endpoints are the methods of your data. Entities are a type of Schema, which define the data model. Resources are a collection of endpoints around one schema.

Rest

npm install --save @rest-hooks/rest

▶api/Todo.ts

import { createResource, Entity } from '@rest-hooks/rest';

export class Todo extends Entity {
  id = 0;
  userId = 0;
  title = '';
  completed = false;

  pk() {
    return `${this.id}`;
  }
  static key = 'Todo';
}

export const TodoResource = createResource({
  urlPrefix: 'https://jsonplaceholder.typicode.com',
  path: '/todos/:id',
  schema: Todo,
});

▶Six_Methods

import { TodoResource } from './api/Todo';

// GET https://jsonplaceholder.typicode.com/todos/5
TodoResource.get({ id: 5 });
// GET https://jsonplaceholder.typicode.com/todos
TodoResource.getList();
// POST https://jsonplaceholder.typicode.com/todos
TodoResource.create({ title: 'my todo' });
// PUT https://jsonplaceholder.typicode.com/todos/5
TodoResource.update({ id: 5 }, { title: 'my todo' });
// PATCH https://jsonplaceholder.typicode.com/todos/5
TodoResource.partialUpdate({ id: 5 }, { title: 'my todo' });
// DELETE https://jsonplaceholder.typicode.com/todos/5
TodoResource.delete({ id: 5 });

GraphQL

npm install --save @rest-hooks/graphql

api/Todo.ts

import { GQLEndpoint, GQLEntity } from '@rest-hooks/graphql';

const gql = new GQLEndpoint('/');

export class Todo extends GQLEntity {
  title = '';
  completed = false;

  static key = 'Todo';
}

export const TodoResource = {
  getList: gql.query(
    `
  query GetTodos {
    todo {
      id
      title
      completed
    }
  }
`,
    { todos: [Todo] },
  ),
  update: gql.mutation(
    `mutation UpdateTodo($todo: Todo!) {
    updateTodo(todo: $todo) {
      id
      title
      completed
    }
  }`,
    { updateTodo: Todo },
  ),
};

Promise

npm install --save @rest-hooks/endpoint

api/Todo.ts

import { Entity, Endpoint } from '@rest-hooks/endpoint';

export class Todo extends Entity {
  id = 0;
  userId = 0;
  title = '';
  completed = false;

  pk() {
    return `${this.id}`;
  }
  static key = 'Todo';
}

export const TodoResource = {
  getList: new Endpoint(
    () =>
      fetch('https://jsonplaceholder.typicode.com/todos').then(res =>
        res.json(),
      ),
    {
      schema: [Todo],
    },
  ),
  update: new Endpoint(
    (id: string, body: Partial<Todo>) =>
      fetch(`https://jsonplaceholder.typicode.com/todos/${id}`, {
        method: 'PUT',
        body: JSON.stringify(body),
      }).then(res => res.json()),
    {
      schema: Todo,
      sideEffect: true,
    },
  ),
};

It's highly encouraged to design APIs with consistent patterns. Because of this, you can extend our protocol specific helpers. After choosing your protocol, you can read up on the full docs for reach protocol REST, GraphQL, Image/binary, Websockets+SSE