Skip to content
This repository has been archived by the owner on Nov 12, 2024. It is now read-only.

v5.0.0

Latest
Compare
Choose a tag to compare
@htunnicliff htunnicliff released this 11 Sep 18:37
· 4 commits to main since this release

Overview of Changes

  • Rewrote APIs to use latest openapi-fetch types.
  • Added useImmutable and useMutate hooks.
  • Broke apart createHooks into separate builder functions.
  • Added support for optional fetch option arguments.
  • Wrote comprehensive tests for both runtime behavior and type checking.
  • Wrote brand-new README documentation detailing new APIs.

See how to migrate from v4 below 👇

Breaking Changes

  • Removed CommonJS support (now ESM-only).
  • Removed global configuration function.
  • Replaced createHooks with separate builder functions.
  • Replaced matchKeyComparator with useMutate.
  • Renamed and refactored RequestTypesTypesForRequest.
  • Fixed internal types that broke from breaking changes in openapi-fetch.

Migration from v4

Imports

Replace createHooks calls with createQueryHook, createInfiniteHook, and createImmutableHook as needed.

import createClient from "openapi-fetch";
-import { createHooks } from "swr-openapi";
+import { createQueryHook, createInfiniteHook } from "swr-openapi";

const client = createClient(/* */);

-const { 
-  use: useSandwich, 
-  useInfinite: useSandwichInfinite 
-} = createHooks(client, "sandwich-api");
+export const useSandwich = createQueryHook(client, "sandwich-api");
+export const useSandwichInfinite = createInfiniteHook(client, "sandwich-api");

Fetch Options

For requests made that don't have required fetch options (like a path parameter), feel free to remove empty init arguments like this, as they are no longer required!

-const { data } = useQuery('/some/path', {});
+const { data } = useQuery('/some/path');

Key Matchers

Remove applySwrOpenApiConfiguration and define a useMutate hook using createMutateHook:

import createClient from "openapi-fetch";
import { isMatch } from "lodash";
-import { applySwrOpenApiConfiguration, createHooks } from "swr-openapi";
+import { createMutateHook } from "swr-openapi";

const client = createClient(/* */);

-applySwrOpenApiConfiguration({ matchKeyComparator: isMatch });

-export { matchKey } = createHooks(client, "unique-prefix");
+export const useMutate = createMutateHook(
+  client,
+  prefix,
+  isMatch
+);

To replace matchKey in consumers, call useMutate and invoke the callback like this:

-import { useSWRConfig } from "swr";
-import { matchKey } from "./api-clients";
+import { useMutate } from "./api-clients";  

function MyComponent() {
  // ...

-  const { mutate } = useSWRConfig();
+  const mutate = useMutate();

  const save = async () => {
    // ...
    await mutate(
-     matchKey("/some/path", { params: { query: { some: "item" } } }),
+     ["/some/path", { params: { query: { some: "item" } } }],
      { some: "data" },
    );
  };

  // ...
}

ESM in Next.js

If using Next.js in a non-ESM project, add swr-openapi to the transpilePackages array in your Next.js config file. This should take care of transpilation automatically, as well as transforming in Jest (if you use next/jest).


v4.1.2...v5.0.0