eproxe-swr-extension
v3.0.0
Published
<p align="center"> <img src="../../images/eproxe.svg"/> </p> <h2 align="center">+</h2> <p align="center"> <img width="400px" src="https://camo.githubusercontent.com/cd6cabc4794eae6f99339744c2db817f43eda5de8611360dce9955d2606a9f43/68747470733a2f2f617373
Downloads
3
Readme
eproxe-swr-extension
Install
npm i eproxe-swr-extension
pnpm add eproxe-swr-extension
Usage
for this to work you need an extension that transforms eproxe calls to async data, see extensions
Example
client/api.ts
import eproxe from 'eproxe';
import type { ServerApi } from '../../server/src/api';
import AxiosProxyExtension from 'eproxe-axios-extension';
import axios from 'axios';
import SwrProxyExtension from 'eproxe-swr-extension';
const procedures = eproxe<ServerApi>();
const axiosInstance = axios.create({ baseURL: 'http://localhost:3000' });
const AxiosExtension = new AxiosProxyExtension(axiosInstance);
const SwrExtension = new SwrProxyExtension();
// the order matters! swr is ontop of an already present data fetching extension
const API = SwrExtension.extend(AxiosExtension.extend(procedures));
export default API;
client/App.tsx
import API from './api';
function App() {
const { data, mutate, isValidating } = API.testApi.getRandomNumber.use(
-50,
50
);
if (isValidating) return <>Loading...</>;
return <button onClick={() => mutate()}>click to mutate ({data})</button>;
}
see a full example here