Skip to main content

schema.Invalidate

Describes entities to be marked as INVALID. This removes items from a collection, or forces suspense for endpoints where the entity is required.

Constructor:

  • entity which entity to invalidate. The input is used to compute the pk() for lookup.

Usage​

Fixtures
GET /users
[{"id":"123","name":"Jim"},{"id":"456","name":"Jane"},{"id":"555","name":"Phone"}]
DELETE /users/:id
▶api/User
import { Entity, RestEndpoint } from '@data-client/rest';

class User extends Entity {
  id = '';
  name = '';
}
export const getUsers = new RestEndpoint({
  path: '/users',
  schema: new schema.Collection([User]),
});
export const deleteUser = new RestEndpoint({
  path: '/users/:id',
  method: 'DELETE',
  schema: new schema.Invalidate(User),
});
▶UserPage
import { getUsers, deleteUser } from './api/User';

function UsersPage() {
  const users = useSuspense(getUsers);
  const ctrl = useController();
  return (
    <div>
      {users.map(user => (
        <div key={user.pk()}>
          {user.name}{' '}
          <span
            style={{ cursor: 'pointer' }}
            onClick={() => ctrl.fetch(deleteUser, { id: user.id })}
          >
            ❌
          </span>
        </div>
      ))}
    </div>
  );
}
render(<UsersPage />);
🔴 Live Preview
Store▶

Batch Invalidation​

Here we add another endpoint for deleting many entities at a time by wrapping schema.Invalidate in an array. Data Client can then invalidate every entity from the response.

import Post from './Post';
export const PostResource = resource({
  schema: Post,
  path: '/posts/:id',
}).extend('deleteMany', {
  path: '/posts',
  body: [] as string[],
  method: 'DELETE',
  schema: [new schema.Invalidate(Post)],
});
▶Request
import { PostResource } from './Resource';
PostResource.deleteMany(['5', '13', '7']);
Request
DELETE /posts
Content-Type: application/json
Body: ["5","13","7"]
Response200
[
  {
    "id": "5"
  },
  {
    "id": "13"
  },
  {
    "id": "7"
  }
]

Sometimes our backend returns nothing for 'DELETE'. In this case, we can use process to build a usable response from the argument body.

import Post from './Post';
export const PostResource = resource({
  schema: Post,
  path: '/posts/:id',
}).extend('deleteMany', {
  path: '/posts',
  body: [] as string[],
  method: 'DELETE',
  schema: [new schema.Invalidate(Post)],
  process(value, body) {
    // use the body payload to inform which entities to delete
    return body.map(id => ({ id }));
  }
});
▶Request
import { PostResource } from './Resource';
PostResource.deleteMany(['5', '13', '7']);
Request
DELETE /posts
Content-Type: application/json
Body: ["5","13","7"]
Response204
NO CONTENT

Impact on useSuspense()​

When entities are invalidated in a result currently being presented in React, useSuspense() will consider them invalid

  • For optional Entities, they are simply removed
  • For required Entities, this invalidates the entire response re-triggering suspense.