edenq

A TanStack Query (React Query) wrapper for Elysaia Eden.

Installation

npm install edenq

Usage Examples

Below are examples demonstrating how to use the custom hooks for mutations, queries, and infinite queries.

// Import or initialize your API instance (replace with your actual setup)
const api = treaty<App>("localhost:3000");
export default api;

// Create a login mutation hook using your endpoint
export const useLogin = createApiMutation(api.auth.login.post);

// In your component, use the mutation hook:
const loginMutation = useLogin({
    onSuccess: (data) => {
        // Do something after a successful login (e.g., redirect or show a success message)
        console.log("Login successful!", data);
    },
    onError: (error) => {
        // Handle errors here (e.g., show an error message)
        console.error("Login failed:", error);
    },
});

// To trigger the mutation (e.g., on form submit):
// loginMutation.mutate({ username: "user", password: "pass" });

Query Example

// Create a Query using your endpoint
export const useSearchUser = createApiQuery(api.user.search.get);

// In your componnet use the query
const { data, isLoading } = useSearchUser({
    query: {
        q: "ifty",
    },
});

Infinite Query Example: Paginated Posts

// Create an infinite query hook for fetching paginated posts
export const useInfinitePosts = createApiInfiniteQuery(api.posts.list.get);

// In your component, use the infinite query hook:
const {
    data: postsData,
    fetchNextPage,
    hasNextPage,
    isFetchingNextPage,
} = useInfinitePosts({ page: 1, limit: 10 }, {
    // Provide a function to get the next page parameter from the last page's data
    getNextPageParam: (lastPage) => lastPage.nextPage ?? false,
});

// Render the posts list (pseudo-code example):
return (
    <div>
        {postsData?.pages.map((page, pageIndex) => (
            <div key={pageIndex}>
                {page.posts.map((post: any) => (
                    <div key={post.id}>{post.title}</div>
                ))}
            </div>
        ))}
        <button onClick={() => fetchNextPage()} disabled={!hasNextPage || isFetchingNextPage}>
            {isFetchingNextPage ? "Loading more..." : "Load More"}
        </button>
    </div>
);