v0.2 Controller.fetch, async getHeaders, Collections

Collections enable Arrays and Objects to be easily extended by pushing or unshifting new members. The namesake comes from Backbone Collections.

Collections are now the default schema for Resource.getList.

TodoResource

TodoItem

CreateTodo

TodoList

import { useController } from '@data-client/react';
import { TodoResource } from './TodoResource';

export default function CreateTodo({ userId }: { userId: number }) {
  const ctrl = useController();
  const handleKeyDown = async e => {
    if (e.key === 'Enter') {
      ctrl.fetch(TodoResource.getList.push, {
        userId,
        title: e.currentTarget.value,
        id: Math.random(),
      });
      e.currentTarget.value = '';
    }
  };
  return (
    <div className="listItem nogap">
      <label>
        <input type="checkbox" name="new" checked={false} disabled />
        <input type="text" onKeyDown={handleKeyDown} />
      </label>
    </div>
  );
}

🔴 Live Preview

Store▶

Upgrading is quite simple, as @data-client/rest/next and @data-client/react/next were introduced to allow incremental adoption of the new APIs changed in this release. This makes the actual upgrade a simple import rename.

Other highlights include

• @data-client/rest
  • async RestEndpoint.getHeaders
• @data-client/react
  • Controller.fetch() return value is denormalized from schema
  • Manager action type updates

For all details, keep reading:

@data-client/react 0.2

https://github.com/reactive/data-client/releases/tag/%40data-client%2Freact%400.2.0

Upgrading can be done gradually as all changes were initially released in /next.

1. Incrementally move to new versions by importing from /next

   import { useController } from '@data-client/react/next';

2. Upgrade to v0.2 - v0.4 (all compatible).

   npm install --save @data-client/[email protected]

3. Imports can be updated incrementally after upgrade. /next exports the same as top-level.

   import { useController } from '@data-client/rest';

Changes

• Controller.fetch(): 2545 Controller.fetch() returns denormalized form when Endpoint has a Schema

  const handleChange = async e => {
    const todo = await ctrl.fetch(
      TodoResource.partialUpdate,
      { id: todo.id },
      { completed: e.currentTarget.checked },
    );
    // todo is Todo, we can use all its members and be type-safe
    console.log(todo.pk(), todo.title);
  };

• NetworkManager: NetworkManager interface changed to only support new actions 2690

• SubscriptionManager/PollingSubscription interfaces simplified based on new actions 2690

Removals of deprecated items

• 2691: Remove DispatchContext, DenormalizeCacheContext

Deprecations

• controller.receive, controller.receiveError 2690
• RECEIVE_TYPE 2690
• MiddlewareAPI.controller (MiddlewareAPI is just controller itself) 2690
  • ({controller}) => {} -> (controller) => {}

@data-client/rest 0.2

https://github.com/reactive/data-client/releases/tag/%40data-client%2Frest%400.2.0

Upgrading can be done gradually as all changes were initially released in /next.

1. Incrementally move to new versions by importing from /next

   import {
     RestEndpoint,
     createResource,
     GetEndpoint,
     MutateEndpoint,
   } from '@data-client/rest/next';

   See the migrations of the /examples directory as an example

2. Upgrade to v0.2-0.7 (all compatible).

   npm install --save @data-client/[email protected]

3. Imports can be updated incrementally after upgrade. /next exports the same as top-level.

   import { RestEndpoint, createResource } from '@data-client/rest';

Changes

• RestEndpoint's getRequestInit and getHeaders optionally return a promise 2542

  import { RestEndpoint } from '@data-client/rest/next';
  
  export default class AuthdEndpoint<
    O extends RestGenerics = any,
  > extends RestEndpoint<O> {
    declare static accessToken?: string;
  
    async getHeaders(headers: HeadersInit) {
      return {
        ...headers,
        'Access-Token': await getOrFetchToken(),
      } as HeadersInit;
    }
  }
  
  export const TodoResource = createResource({
    urlPrefix: 'https://jsonplaceholder.typicode.com',
    path: '/todos/:id',
    schema: Todo,
    Endpoint: AuthdEndpoint,
  });

  BREAKING: Calling super.getRequestInit() will return a promise - so you must resolve it:

  class AuthdEndpoint<
    O extends RestGenerics = any,
  > extends RestEndpoint<O> {
    getRequestInit(body: any): RequestInit {
      return {
        ...super.getRequestInit(body),
        credentials: 'same-origin',
      };
    }
  }

  ->

  class AuthdEndpoint<
    O extends RestGenerics = any,
  > extends RestEndpoint<O> {
    async getRequestInit(body: any): Promise<RequestInit> {
      return {
        ...(await super.getRequestInit(body)),
        credentials: 'same-origin',
      };
    }
  }

• createResource().getList uses a Collection, which .create appends to 2593

  • Resource.create will automatically add to the list
    • Resource.getList.push is identical to Resource.create
  • Remove any Endpoint.update as it is not necessary and will not work

• GetEndpoint and MutateEndpoint parameters changed to what NewGetEndpoint, NewMutateEndpoint was.

• createResource() generics changed to O extends ResourceGenerics This allows customizing the Resource type with body and searchParams 2593

  • createGithubResource<U extends string, S extends Schema> -> createGithubResource<O extends ResourceGenerics>

Hoisting /next PR #2692

Removals of deprecated items

• 2690: Removed deprecated Endpoint.optimisticUpdate -> use Endpoint.getOptimisticResponse
• 2688 Remove FetchShape compatibility.

Upgrade support

As usual, if you have any troubles or questions, feel free to join our or file a bug