跳到主要内容

v0.2 Controller.fetch、异步 getHeaders、Collection

· 阅读需 6 分钟
Nathaniel Tucker
Nathaniel Tucker
Creator of Reactive Data Client

Collection 让数组和对象可以通过 push 或 unshift 新成员来轻松扩展。它的名字来自 Backbone Collections。

Collection 现在是 Resource.getList 的默认 schema。

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>
  );
}
结果

升级相当简单，因为我们引入了 @data-client/rest/next 和 @data-client/react/next，以便渐进式地采用本版本中变更的新 API。这使得实际的升级只是简单地重命名一下导入路径。

其他亮点包括

完整细节请继续阅读：

@data-client/react 0.2​

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

升级可以逐步进行，因为所有变更最初都发布在 /next 中。

  1. 通过从 /next 导入，逐步迁移到新版本

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

  2. 升级到 v0.2 - v0.4（全部兼容）。

    npm install --save @data-client/rest@0.4.3

  3. 升级后可以逐步更新导入。/next 导出的内容与顶层相同。

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

变更​

  • Controller.fetch()：2545 当 Endpoint 有 Schema 时，Controller.fetch() 返回反规范化后的形式

    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 接口改为只支持新的 action 2690

  • SubscriptionManager/PollingSubscription 接口基于新的 action 进行了简化 2690

移除已弃用项​

  • 2691：移除 DispatchContext、DenormalizeCacheContext

弃用​

  • controller.receive、controller.receiveError 2690
  • RECEIVE_TYPE 2690
  • MiddlewareAPI.controller（MiddlewareAPI 现在就是 controller 本身）2690
    • ({controller}) => {} -> (controller) => {}

@data-client/rest 0.2​

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

升级可以逐步进行，因为所有变更最初都发布在 /next 中。

  1. 通过从 /next 导入，逐步迁移到新版本

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

    可以参考 /examples 目录的迁移作为示例

  2. 升级到 v0.2-0.7（全部兼容）。

    npm install --save @data-client/rest@0.7.6

  3. 升级后可以逐步更新导入。/next 导出的内容与顶层相同。

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

变更​

  • RestEndpoint 的 getRequestInit 和 getHeaders 可以选择返回 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,
    });

    破坏性变更：调用 super.getRequestInit() 将返回一个 promise，所以你必须先解析它：

Before
class AuthdEndpoint<
  O extends RestGenerics = any,
> extends RestEndpoint<O> {
  getRequestInit(body: any): RequestInit {
    return {
      ...super.getRequestInit(body),
      credentials: 'same-origin',
    };
  }
}
After
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 使用 Collection，.create 会向其追加 2593
    • Resource.create 会自动添加到列表中
      • Resource.getList.push 与 Resource.create 完全相同
    • 移除所有 Endpoint.update，因为它不再必要而且不会生效
  • GetEndpoint 和 MutateEndpoint 的参数改为之前 NewGetEndpoint、NewMutateEndpoint 的参数。
  • createResource() 的泛型改为 O extends ResourceGenerics。这允许通过 body 和 searchParams 自定义 Resource 类型 2593
    • createGithubResource<U extends string, S extends Schema> -> createGithubResource<O extends ResourceGenerics>

提升 /next 的 PR #2692

移除已弃用项​

  • 2690：移除已弃用的 Endpoint.optimisticUpdate -> 请使用 Endpoint.getOptimisticResponse
  • 2688 移除 FetchShape 兼容层。

升级支持​

一如既往，如果你遇到任何问题或有任何疑问，欢迎加入我们的 Chat 或提交 bug