@aspida/react-query
v1.14.0
Published
React Query wrapper for aspida
Downloads
2,735
Readme
@aspida/react-query
Getting Started
Installation
Using npm:
$ npm install aspida @aspida/react-query @aspida/axios react-query axios # $ npm install aspida @aspida/react-query @aspida/fetch react-query # $ npm install aspida @aspida/react-query @aspida/node-fetch react-query node-fetch
Using Yarn:
$ yarn add aspida @aspida/react-query @aspida/axios react-query axios # $ yarn add aspida @aspida/react-query @aspida/fetch react-query # $ yarn add aspida @aspida/react-query @aspida/node-fetch react-query node-fetch
Make HTTP request from application
src/index.ts
import aspida from "@aspida/axios"; // "@aspida/fetch", "@aspida/node-fetch"
import { useAspidaQuery } from "@aspida/react-query";
import { QueryClient, QueryClientProvider, useMutation, useQueryClient } from "react-query";
import api from "../api/$api";
const client = api(aspida());
const queryClient = new QueryClient();
function App() {
return (
// Provide the client to your App
<QueryClientProvider client={queryClient}>
<Todos />
</QueryClientProvider>
);
}
function postTodo(body: { id: number; title: string }) {
return client.todos.$post({ body });
}
function Todos() {
// Access the client
const queryClient = useQueryClient();
// Queries
const query = useAspidaQuery(client.todos, { query: { limit: 10 } });
// Mutations
const mutation = useMutation(postTodo, {
onSuccess: () => {
// Invalidate and refetch
queryClient.invalidateQueries(client.todos.$path({ query: { limit: 10 } }));
},
});
return (
<div>
<ul>
{query.data.map(todo => (
<li key={todo.id}>{todo.title}</li>
))}
</ul>
<button
onClick={() => {
mutation.mutate({
id: Date.now(),
title: "Do Laundry",
});
}}
>
Add Todo
</button>
</div>
);
}
render(<App />, document.getElementById("root"));
Get response body/status/headers
src/index.ts
import aspida from "@aspida/axios"; // "@aspida/fetch", "@aspida/node-fetch"
import { useAspidaQuery } from "@aspida/react-query";
import { QueryClient, QueryClientProvider } from "react-query";
import api from "../api/$api";
const client = api(aspida());
const queryClient = new QueryClient();
function App() {
return (
<QueryClientProvider client={queryClient}>
<Profile />
</QueryClientProvider>
);
}
function Profile() {
const { data, error } = useAspidaQuery(client.user._userId(123), "get", {
query: { name: "mario" },
});
if (error) return <div>failed to load</div>;
if (!data) return <div>loading...</div>;
return (
<>
<div>Status: {data.status}</div>
<div>Headers: {JSON.stringify(data.headers)}</div>
<div>Name: {data.body.name}</div>
</>
);
}
render(<App />, document.getElementById("root"));
useAspidaQuery(client.user._userId(123), { query })
is an alias of useAspidaQuery(client.user._userId(123), "$get", { query })
Use with React Query options
src/index.ts
import aspida from "@aspida/axios"; // "@aspida/fetch", "@aspida/node-fetch"
import { useAspidaQuery } from "@aspida/react-query";
import { QueryClient, QueryClientProvider } from "react-query";
import api from "../api/$api";
const client = api(aspida());
const queryClient = new QueryClient();
function App() {
return (
<QueryClientProvider client={queryClient}>
<Profile />
</QueryClientProvider>
);
}
function Profile() {
const { data, error } = useAspidaQuery(client.user._userId(123), {
query: { name: "mario" },
refetchOnMount: true,
initialData: { name: "anonymous" },
});
if (error) return <div>failed to load</div>;
return <div>hello {data.name}!</div>;
}
render(<App />, document.getElementById("root"));
License
@aspida/react-query is licensed under a MIT License.