Upgrading from 6 to 7

NPM

yarn add rest-hooks@7 @rest-hooks/react@6 @rest-hooks/redux@6 @rest-hooks/test@9

Yarn

npm install --save rest-hooks@7 @rest-hooks/react@6 @rest-hooks/redux@6 @rest-hooks/test@9

@rest-hooks/react is now a peerDependency so be sure to install it. The rest-hooks will eventually only proxy to exporting its members.

For those on @rest-hooks/rest 3 or 4, you'll need to upgrade to the latest on that major release (3.1 or 4.1), then upgrade @rest-hooks/endpoint to 3.

rest@4

npm install --save @rest-hooks/rest@4.1 @rest-hooks/endpoint@3

rest@3

npm install --save @rest-hooks/rest@3.1 @rest-hooks/endpoint@3

Removals

The following previously deprecated members were removed in this release:

• hasUsableData() -> Controller.getResponse
• useFetcher() -> Controller.fetch
• useInvalidateDispatcher() -> Controller.invalidate
• useInvalidator() -> Controller.invalidate
• useResetter() -> Controller.resetEntireStore

This functionality has been moved to Controller, accessible through useController()

Redux-related members have been moved to @rest-hooks/redux and have been removed from 'rest-hooks'. Be sure to update their import location to refer to @rest-hooks/redux

• ExternalCacheProvider
• PromiseifyMiddleware
• mapMiddleware

Deprecations

The following members have been marked as deprecated. Consider changing them after upgrade:

• useResource() -> useSuspense()
• useMeta() -> useError()
• useRetrieve() -> useFetch()

FetchShape -> Endpoint

The new hooks only support EndpointInterface. Endpoints have been around since 2020, so we expect most to already be upgraded by this point.

However, if you still have FetchShapes, you can easily convert them to EndpointInterface by using @rest-hooks/legacy's shapeToEndpoint

import { shapeToEndpoint } from '@rest-hooks/legacy';

function MyComponent() {
  const endpoint: any = useMemo(() => {
    return shapeToEndpoint(fetchShape);
    // we currently don't support shape changes
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);
  const mydata = useSuspense(endpoint, params);
  //...
}

Test @9

Old-style fixtures using FetchShape were removed here.

Before:

const fixtures = [
  {
    request: CoolerArticleResource.detailShape(),
    params,
    result: payload,
  },
];

After:

const fixtures = [
  {
    endpoint: shapeToEndpoint(CoolerArticleResource.detailShape()),
    args: [payload],
    response: payload,
  },
];

Preparing for the future

Once you have successfully upgraded, you can try converting all 'rest-hooks' imports to '@rest-hooks/react'. This will become the recommended way to consume rest hooks when using React. The 'rest-hooks' package will still work but eventually remove any additions.

• import {} from 'rest-hooks' -> import {} from '@rest-hooks/react'
• import { makeCacheProvider } from '@rest-hooks/test'; -> import makeCacheProvider from '@rest-hooks/react/makeCacheProvider';
• import { makeExternalCacheProvider } from '@rest-hooks/test'; -> import makeExternalCacheProvider from '@rest-hooks/redux/makeCacheProvider';

Support

If you have any trouble upgrading, you can get some help from the community discord

If you find any bugs or other issues, feel free to open a github ticket