A React library for working with PocketBase using React Query under the hood.
Provides a reactive interface to PocketBase collections, records, authentication and subscriptions.
Also provides the usePocketBase hook for direct access to the PocketBase client.
This library follows reactive patterns more closely than pocketbase-react, which is more imperative. It uses React Query to manage server state and caching, making it easier to work with PocketBase in a React application.
use-pocketbase relies on pocketbase and @tanstack/react-query as peer dependencies, so you need to install them as well.
npm install use-pocketbase pocketbase @tanstack/react-querypnpm install use-pocketbase pocketbase @tanstack/react-querybun install use-pocketbase pocketbase @tanstack/react-queryyarn install use-pocketbase pocketbase @tanstack/react-queryWrap your application with the PocketBaseProvider and pass in your PocketBase client instance:
export function Main() {
return (
<PocketBaseProvider baseUrl="http://localhost:8090">
<YourApp />
</PocketBaseProvider>
);
}Then you can use pocketbase hooks in your components. This example lists posts and allows you to create a new post. It also subscribes to live updates for the "posts" collection:
function List() {
const { data } = usePbList("posts");
const { create } = usePbMutations("posts");
usePbLive("posts");
if (!data) {
return <div>Loading...</div>;
}
return (
<>
<button
onClick={() => {
create.mutate({
content: "new post",
});
}}
>
Create Mew Post
</button>
<ul>
{data.items.map((item) => (
<li key={item.id}>
{item.content} - {item.created}
</li>
))}
</ul>
</>
);
}Returns the PocketBase client instance from context. Must be used inside PocketBaseProvider.
const pb = usePocketBase();Returns a memoized collection accessor for a given collection ID.
const collection = usePbCollection("posts");Fetches a paginated list of records from a collection using React Query.
const { data } = usePbList("posts", {
page: 1,
perPage: 10,
filter: 'status = "published"',
});Fetches all records in a collection using PocketBase’s getFullList() method.
const { data } = usePbFullList("comments");Fetches the first matching record from a collection.
const { data } = usePbFirst("users", 'username = "john"');Fetches a single record by ID from a collection.
const { data } = usePbOne("posts", "record_id");Provides mutation hooks for creating, updating, and deleting records, as well as a method to invalidate queries.
const { create, update, deleteRecord, invalidate } = usePbMutations("posts");Creates a new record.
Updates an existing record.
Deletes a record by ID.
Invalidates all collection related queries to trigger refetch.
Subscribes to real-time updates on a collection. Automatically unsubscribes on unmount.
usePbSubscribe("posts", (data) => console.log(data));Subscribes to a collection and automatically invalidates queries on any change. Useful for plug-and-play live updates.
usePbLive("posts");Returns the reactive authStore. Triggers component re-renders on auth state changes.
The authStore reference is memoized, so it will not change between renders. Using it as a dependency in useEffect will not work as expected. Use the properties like record and isValid instead.
const { record: user, isValid } = usePbAuthStore();An opinionated utility hook for SPAs. Refreshes the auth session on mount, on window focus, and at an optional interval (default 1 hour). Automatically clears the auth store if the session is no longer valid.
Add this hook once in your app.
usePbAuthRefresh("users", { intervalMs: 30 * 60 * 1000 }); // every 30 minutesWrap your application with this provider to use the hooks. Automatically sets up PocketBase and React Query context. Takes the same props as the PocketBase constructor.
<PocketBaseProvider baseUrl="http://localhost:8090">
<App />
</PocketBaseProvider>MIT