diff --git a/docs/config/404.html b/docs/config/404.html deleted file mode 100644 index 8f9b2be..0000000 --- a/docs/config/404.html +++ /dev/null @@ -1,34 +0,0 @@ - - -
-

- 404 -

-
- This page could not be found. -
-
diff --git a/docs/config/404.md b/docs/config/404.md new file mode 100644 index 0000000..bfea573 --- /dev/null +++ b/docs/config/404.md @@ -0,0 +1,43 @@ + + +
+

404

+

This page could not be found.

+
+ +```js #runkit +// Write some code in the meantime :) + +const Axios = require('axios'); +const { setupCache, buildWebStorage } = require('axios-cache-interceptor'); + +const axios = Axios.create({}); +setupCache(axios, {}); + +await axios.get('https://jsonplaceholder.typicode.com/posts/1'); +``` diff --git a/docs/config/sidebar.md b/docs/config/sidebar.md index 3e451e3..12719b9 100644 --- a/docs/config/sidebar.md +++ b/docs/config/sidebar.md @@ -1,6 +1,7 @@ - Getting Started - [Introduction](pages/introduction.md 'Introduction') + - [Try it out!](pages/try-it-out.md 'Try axios-cache-interceptor') - [Installing](pages/installing.md 'Installing') - [Usage & Examples](pages/usage-examples.md 'Interceptor') - [Storages](pages/storages.md 'Custom storages') @@ -22,69 +23,3 @@ - [License](pages/license.md 'License') - [Contact & Security](pages/contact.md 'Contact & Security') - [Changelog](pages/changelog.md 'Changelog') - - - - diff --git a/docs/index.html b/docs/index.html index 2906d4d..5060512 100644 --- a/docs/index.html +++ b/docs/index.html @@ -71,6 +71,7 @@
Please wait...
+ diff --git a/docs/pages/global-configuration.md b/docs/pages/global-configuration.md index 799ee0d..a1f1dc1 100644 --- a/docs/pages/global-configuration.md +++ b/docs/pages/global-configuration.md @@ -12,7 +12,7 @@ const axios = setupCache(axios, { The storage used to save the cache. Defaults to a simple in-memory storage. -See more about storages [here](pagers/storages). +See more about storages [here](pages/storages). ## `generateKey` @@ -41,6 +41,8 @@ The possible returns are: Example ```ts +// Typescript example! + import { setupCache, type HeaderInterpreter } from 'axios-cache-interceptor'; const myHeaderInterpreter: HeaderInterpreter = (headers) => { diff --git a/docs/pages/homepage.md b/docs/pages/homepage.md index 43c13bd..c092371 100644 --- a/docs/pages/homepage.md +++ b/docs/pages/homepage.md @@ -76,18 +76,18 @@
-```ts -import Axios from 'axios'; -import { setupCache } from 'axios-cache-interceptor'; +```js #runkit +const Axios = require('axios'); +const { setupCache } = require('axios-cache-interceptor'); // same object, but with updated typings. const axios = setupCache(Axios); -const req1 = axios.get('https://api.example.com/'); -const req2 = axios.get('https://api.example.com/'); +const req1 = axios.get('https://jsonplaceholder.typicode.com/posts/1'); +const req2 = axios.get('https://jsonplaceholder.typicode.com/posts/1'); const [res1, res2] = await Promise.all([req1, req2]); -res1.cached; // false -res2.cached; // true +console.log('Request 1:', res1.cached); +console.log('Request 2:', res2.cached); ``` diff --git a/docs/pages/request-id.md b/docs/pages/request-id.md index 988a805..406f727 100644 --- a/docs/pages/request-id.md +++ b/docs/pages/request-id.md @@ -10,13 +10,27 @@ to the same id with `{ url: 'https://a.com/b/' }`. Also, a custom id can be used to treat two requests as the same. -```js -axios.get('...', { - id: 'my-custom-id', - cache: { - // other properties... - } +```js #runkit +const Axios = require('axios'); +const { setupCache } = require('axios-cache-interceptor'); + +// Global +setupCache(Axios); + +const { id } = await Axios.get('https://jsonplaceholder.typicode.com/posts/1', { + baseURL: 'baseURL', + query: { name: 'value' } }); + +console.log('Id 1: ' + id); +console.log('Cache 1:', await Axios.storage.get(id)); + +const { id: id2 } = await Axios.get('https://jsonplaceholder.typicode.com/posts/1', { + id: 'my-overrided-id' +}); + +console.log('Id 2: ' + id2); +console.log('Cache 2:', await Axios.storage.get(id2)); ``` The diff --git a/docs/pages/response-object.md b/docs/pages/response-object.md index 71b4563..eee63ea 100644 --- a/docs/pages/response-object.md +++ b/docs/pages/response-object.md @@ -1,5 +1,18 @@ # Response object +Every response that came from our custom axios instance will have some extras properties. + +```js #runkit +const axios = require('axios'); +const { setupCache } = require('axios-cache-interceptor'); + +setupCache(axios); + +const response = await axios.get('https://jsonplaceholder.typicode.com/posts/1'); + +console.log(response); +``` + Every response that came from our custom axios instance, will have some extras properties, that you can retrieve like that: @@ -17,7 +30,9 @@ A simple boolean to check whether this request was cached or not. ## `id` -The [request id](#request-id) resolved. This property represents the ID used throughout -the internal code. Remember that, depending on the -[config.keyGenerator](#configgeneratekey), it can be different as the provided on the -[request.id](#requestid). +The resolved [request id](pages/request-id.md). This property represents the ID used +throughout the internal code. + +Remember that, depending on the +[Key Generator](pages/global-configuration?id=generatekey), it can be different as the +provided on the [Request Id](pages/per-request-configuration?id=id). diff --git a/docs/pages/storages.md b/docs/pages/storages.md index 2381e61..2856b60 100644 --- a/docs/pages/storages.md +++ b/docs/pages/storages.md @@ -10,13 +10,38 @@ needed) cache data. There are two simple ones that comes by default: Both of them are included in all bundles. +## How storages works + +Storages are meant to be the middleware between the cache interceptor and some sort of +storage (persistent or not). + +The interceptor will call his methods internally to save and retrieve cache objects. But +you can also do that manually. + +```js #runkit +const axios = require('axios'); +const { buildMemoryStorage, setupCache } = require('axios-cache-interceptor'); + +setupCache(axios); + +const { id } = await axios.get('https://jsonplaceholder.typicode.com/posts/1'); + +// Now i want to retrieve all cache saved to the request above. +const cache = await axios.storage.get(id); + +console.log('Cache information:', cache); +``` + ## Memory storage +**This storage is the default one**. + A simple storage that works everywhere. You can access his values with the `data` property; -```js -import { buildMemoryStorage, setupCache } from 'axios-cache-interceptor'; +```js #runkit +const axios = require('axios'); +const { buildMemoryStorage, setupCache } = require('axios-cache-interceptor'); const storage = buildMemoryStorage(); @@ -34,7 +59,8 @@ function. It is a persistent storage that works in conjunction with the browser' [Storage API](https://developer.mozilla.org/en-US/docs/Web/API/Storage). ```js -import { buildWebStorage, setupCache } from 'axios-cache-interceptor'; +const axios = require('axios'); +const { buildWebStorage, setupCache } = require('axios-cache-interceptor'); const myStorage = buildWebStorage(sessionStorage, 'axios-cache:'); @@ -69,9 +95,10 @@ a key and handle cache invalidation. Look at this simple [NodeRedis v4](https://github.com/redis/node-redis) example. -```js -import { createClient } from 'redis'; // v4.0.1 -import { buildStorage, setupCache } from 'axios-cache-interceptor'; +```js #runkit +const axios = require('axios'); +const { createClient } = require('redis'); // v4.0.1 +const { buildStorage, setupCache } = require('axios-cache-interceptor'); const client = createClient(); diff --git a/docs/pages/try-it-out.md b/docs/pages/try-it-out.md new file mode 100644 index 0000000..7d7ccd1 --- /dev/null +++ b/docs/pages/try-it-out.md @@ -0,0 +1,11 @@ +## Try it out! + +```js #runkit +const Axios = require('axios'); +const { setupCache, buildWebStorage } = require('axios-cache-interceptor'); + +const axios = Axios.create({}); +setupCache(axios, {}); + +await axios.get('https://jsonplaceholder.typicode.com/posts/1'); +``` diff --git a/docs/pages/usage-examples.md b/docs/pages/usage-examples.md index 2ad9e6c..715b2c8 100644 --- a/docs/pages/usage-examples.md +++ b/docs/pages/usage-examples.md @@ -36,23 +36,26 @@ You can customize the behaviors of this library in two ways, in a [per request](pages/per-request-configuration.md) or in a [global](pages/global-configuration.md) way. -```js -import Axios from 'axios'; +```js #runkit +const Axios = require('axios'); +const { setupCache } = require('axios-cache-interceptor'); const instance = Axios.create({ /** Here you can pass the axios options * */ }); -// Global +// Global options setupCache(instance, { /** Here you can pass the interceptor options * */ }); -// Per request -await instance.get('url', { +// Per request options +const result = await instance.get('https://jsonplaceholder.typicode.com/posts/1', { /** Override axios options * */ cache: { /** Override cache options * */ } }); + +console.log('Result:', result.data); ``` diff --git a/docs/static/index.js b/docs/static/index.js index fc9d80a..e5a52c3 100644 --- a/docs/static/index.js +++ b/docs/static/index.js @@ -11,11 +11,11 @@ function editThisPage(_, vm) { } window.$docsify = { - name: 'Axios Cache Interceptor', + name: '🚀 Axios Cache Interceptor', coverpage: 'config/cover.md', loadSidebar: 'config/sidebar.md', - notFoundPage: 'config/404.html', + notFoundPage: 'config/404.md', homepage: 'pages/homepage.md', themeColor: 'hsl(275, 100%, 50%)', @@ -23,5 +23,5 @@ window.$docsify = { subMaxLevel: 2, search: 'auto', - plugins: [editThisPage] + plugins: [editThisPage, window.runkitDocsify] }; diff --git a/docs/static/runkit.js b/docs/static/runkit.js new file mode 100644 index 0000000..6b12b7d --- /dev/null +++ b/docs/static/runkit.js @@ -0,0 +1,48 @@ +(function () { + var componentName = 'rk-embed'; + + function loadScript(src, onload) { + var script = document.createElement('script'); + script.src = src; + script.onload = onload; + document.head.appendChild(script); + } + + loadScript('https://embed.runkit.com', function () { + class RkEmbed extends HTMLElement { + constructor() { + super(); + + const wrapper = document.createElement('div'); + wrapper.style = 'margin: 20pt'; + + const source = this.textContent; + + this.textContent = ''; + + const tempCodePlaceholder = document.createElement('pre'); + tempCodePlaceholder.textContent = source; + + window.RunKit.createNotebook({ + element: wrapper, + source, + onLoad: () => tempCodePlaceholder.remove() + }); + + this.appendChild(wrapper); + this.appendChild(tempCodePlaceholder); + } + } + + customElements.define(componentName, RkEmbed); + }); + + window.runkitDocsify = function (hook) { + const regex = + /
(.*?)<\/code><\/pre>/gs;
+
+    hook.afterEach((html, next) =>
+      next(html.replace(regex, '<' + componentName + '>$1'))
+    );
+  };
+})();