vercel · naporin0624 · Nov 4, 2023
@@ -32,14 +32,19 @@ For example, a [JavaScript Map](https://developer.mozilla.org/en-US/docs/Web/Jav
 
 ## Create Cache Provider [#create-cache-provider]
 
+Use `initCache` to create a cache for SWR, or use `mutate` in the return value of `initCache` if you want to use global mutate under `SWRConfig` with `provider` set.
+
 The `provider` option of `SWRConfig` receives a function that returns a [cache provider](#cache-provider). The provider will then be used by all SWR hooks inside that `SWRConfig` boundary. For example:
 
 ```jsx
 import useSWR, { SWRConfig } from 'swr'
+import { initCache } from 'swr/_internal'
+import type { ScopedMutator, Cache } from 'swr/_internal'
+const [cache, mutate] = initCache(new Map()) as [Cache<unknown>, ScopedMutator]
 
 function App() {
   return (
-    <SWRConfig value={{ provider: () => new Map() }}>
+    <SWRConfig value={{ provider: () => cache }}>
       <Page/>
     </SWRConfig>
   )
@@ -60,10 +65,6 @@ import { Cache } from 'components/diagrams/cache'
 
 When nested, SWR hooks will use the upper-level cache provider. If there is no upper-level cache provider, it fallbacks to the default cache provider, which is an empty `Map`.
 
-<Callout emoji="⚠️">
-   If a cache provider is used, the global `mutate` will **not** work for SWR hooks under that `<SWRConfig>` boundary. Please use [this](#access-current-cache-provider) instead.
-</Callout>
-
 ## Access Current Cache Provider [#access-current-cache-provider]
 
 When inside a React component, you need to use the [`useSWRConfig`](/docs/global-configuration#access-to-global-configurations) hook to get access to the current cache provider as well as other configurations including `mutate`:

@@ -32,14 +32,19 @@ For example, a [JavaScript Map](https://developer.mozilla.org/en-US/docs/Web/Jav
 
 ## Create Cache Provider [#create-cache-provider]
 
+Use `initCache` to create a cache for SWR, or use `mutate` in the return value of `initCache` if you want to use global mutate under `SWRConfig` with `provider` set.
+
 The `provider` option of `SWRConfig` receives a function that returns a [cache provider](#cache-provider). The provider will then be used by all SWR hooks inside that `SWRConfig` boundary. For example:
 
 ```jsx
 import useSWR, { SWRConfig } from 'swr'
+import { initCache } from 'swr/_internal'
+import type { ScopedMutator, Cache } from 'swr/_internal'
+const [cache, mutate] = initCache(new Map()) as [Cache<unknown>, ScopedMutator]
 
 function App() {
   return (
-    <SWRConfig value={{ provider: () => new Map() }}>
+    <SWRConfig value={{ provider: () => cache }}>
       <Page/>
     </SWRConfig>
   )
@@ -60,10 +65,6 @@ import { Cache } from 'components/diagrams/cache'
 
 When nested, SWR hooks will use the upper-level cache provider. If there is no upper-level cache provider, it fallbacks to the default cache provider, which is an empty `Map`.
 
-<Callout emoji="⚠️">
-   If a cache provider is used, the global `mutate` will **not** work for SWR hooks under that `<SWRConfig>` boundary. Please use [this](#access-current-cache-provider) instead.
-</Callout>
-
 ## Access Current Cache Provider [#access-current-cache-provider]
 
 When inside a React component, you need to use the [`useSWRConfig`](/docs/global-configuration#access-to-global-configurations) hook to get access to the current cache provider as well as other configurations including `mutate`:

@@ -32,14 +32,19 @@ Par exemple, une instance de [JavaScript Map](https://developer.mozilla.org/en-U
 
 ## Creation du Fournisseur de Cache [#create-cache-provider]
 
+Utilisez `initCache` pour créer un cache pour SWR, ou utilisez `mutate` dans la valeur de retour de `initCache` si vous voulez utiliser le mutate global sous `SWRConfig` avec `provider` défini.
+
 L'option `provider` de `SWRConfig` reçoit une fonction qui renvoie un [fournisseur de cache](#cache-provider). Le fournisseur sera ensuite utilisé par tous les hooks SWR à l'intérieur de cette limite `SWRConfig`. Par exemple:
 
 ```jsx
 import useSWR, { SWRConfig } from 'swr'
+import { initCache } from 'swr/_internal'
+import type { ScopedMutator, Cache } from 'swr/_internal'
+const [cache, mutate] = initCache(new Map()) as [Cache<unknown>, ScopedMutator]
 
 function App() {
   return (
-    <SWRConfig value={{ provider: () => new Map() }}>
+    <SWRConfig value={{ provider: () => cache }}>
       <Page/>
     </SWRConfig>
   )
@@ -60,10 +65,6 @@ import { Cache } from 'components/diagrams/cache'
 
 Lorsqu'ils sont imbriqués, les hooks SWR utiliseront le fournisseur de cache de niveau supérieur. S'il n'y a pas de fournisseur de cache de niveau supérieur, il se replie sur le fournisseur de cache par défaut, qui est une `Map` vide.
 
-<Callout emoji="⚠️">
-  Si un fournisseur de cache est utilisé, le `mutate` global ne fonctionnera **pas** pour les hooks SWR sous cette limite `<SWRConfig>`. Veuillez utiliser [celui-ci](#access-current-cache-provider) à la place.
-</Callout>
-
 ## Accès au Fournisseur de Cache Actuel [#access-current-cache-provider]
 
 Lorsqu'il est à l'intérieur d'un composant React, vous devez utiliser le hook [`useSWRConfig`](/docs/global-configuration#access-to-global-configurations) pour accéder au fournisseur de cache actuel ainsi qu'à d'autres configurations, y compris `mutate`:

@@ -32,14 +32,19 @@ interface Cache<Data> {
 
 ## キャッシュプロバイダーの作成 [#create-cache-provider]
 
+`initCache` を使用して SWR のキャッシュを作成できます。provider を設定した `SWRConfig` 以下でグローバルミューテートを使用したい場合は `initCache` の戻り値の `mutate` を使用します。
+
 `SWRConfig` の `provider` オプションは、 [キャッシュプロバイダー](#キャッシュプロバイダー)を返す関数を受け取ります。受け取ったプロバイダーは、その `SWRConfig` の範囲内のすべての SWR フックで使用されます。例：
 
 ```jsx
 import useSWR, { SWRConfig } from 'swr'
+import { initCache } from 'swr/_internal'
+import type { ScopedMutator, Cache } from 'swr/_internal'
+const [cache, mutate] = initCache(new Map()) as [Cache<unknown>, ScopedMutator]
 
 function App() {
   return (
-    <SWRConfig value={{ provider: () => new Map() }}>
+    <SWRConfig value={{ provider: () => cache }}>
       <Page/>
     </SWRConfig>
   )
@@ -60,10 +65,6 @@ import { Cache } from 'components/diagrams/cache'
 
 ネストされている場合、 SWR フックは上位レベルのキャッシュプロバイダーを使用します。もし上位レベルのキャッシュプロバイダーが無い場合は、空の `Map` をデフォルトのキャッシュプロバイダーとして使用します。
 
-<Callout emoji="⚠️">
-  キャッシュプロバイダーを使用している場合、グローバルな `mutate` は `<SWRConfig />` 以下の SWR フックでは**機能しません**。代わりに [こちら](#現在のキャッシュプロバイダーにアクセスする) を使用してください。
-</Callout>
-
 ## 現在のキャッシュプロバイダーにアクセスする [#access-current-cache-provider]
 
 React コンポーネント内では、 `mutate` を含む他の設定と同様に、現在のキャッシュプロバイダーへアクセスするために、 [useSWRConfig](/docs/global-configuration#グローバル設定へアクセス) フックを使用する必要があります。

@@ -32,14 +32,19 @@ interface Cache<Data> {
 
 ## 캐시 공급자 생성하기 [#create-cache-provider]
 
+SWR에 대한 캐시를 생성하려면 `initCache`를 사용하거나, `provider`가 설정된 `SWRConfig`에서 전역 돌연변이를 사용하려면 `initCache`의 반환 값에 `mutate`를 사용합니다.
+
 `SWRConfig`의 `provider` 옵션은 [캐시 공급자](#cache-provider)를 반환하는 함수를 받습니다. 그러면 공급자를 `SWRConfig` 경계 내의 모든 SWR hook에서 사용할 수 있습니다.
 
 ```jsx
 import useSWR, { SWRConfig } from 'swr'
+import { initCache } from 'swr/_internal'
+import type { ScopedMutator, Cache } from 'swr/_internal'
+const [cache, mutate] = initCache(new Map()) as [Cache<unknown>, ScopedMutator]
 
 function App() {
   return (
-    <SWRConfig value={{ provider: () => new Map() }}>
+    <SWRConfig value={{ provider: () => cache }}>
       <Page/>
     </SWRConfig>
   )
@@ -60,10 +65,6 @@ import { Cache } from 'components/diagrams/cache'
 
 중첩된 경우, SWR hook은 상위 레벨의 캐시 공급자를 사용합니다. 상위 레벨의 캐시 공급자가 존재하지 않을 경우, 빈 `Map`인 기본 캐시 공급자로 대체됩니다.
 
-<Callout emoji="⚠️">
-  캐시 공급자가 사용되는 경우, 전역 `mutate`는 `<SWRConfig>` 경계 내의 SWR hook에서 작동하지 **않습니다**. 대신에 [이것](#access-current-cache-provider)을 사용하세요.
-</Callout>
-
 ## 현재 캐시 공급자에 접근하기 [#access-current-cache-provider]
 
 React 컴포넌트 내에 있을 때, `mutate`를 포함해 다른 설정과 마찬가지로 현재 캐시 공급자에 접근하려면 [`useSWRConfig`](/docs/global-configuration#access-to-global-configurations) hook을 사용해야 합니다.