Setup

In your app.tsx entry file, you will need to add the CapableClientProvider

import { CapableClient } from "@capable-health/client";
import { CapableClientProvider } from "@capable-health/hooks";

const capableClient = new CapableClient({
  TOKEN: () => Promise.resolve(""),
});

return (
  <CapableClientProvider capableClient={capableClient}>
    ...
  </CapableClientProvider>
);

NOTE: you need to remove <QueryClientProvider client={queryClient}> if you're using it. CapableClientProvider handles adding the QueryClientProvider for you.

Usage

In your component, you'll need to import the CapableClientHookContext which will provide you with the CapableClientHook object. From there, you can call any CapableClient endpoint and have all your responses cached using react-query.

import { useContext } from "react";
import { CapableClientHooksContext } from "@capable-health/hooks";

const capableClientHooks = useContext(CapableClientHooksContext);

const { data, isLoading, isError } = capableClientHooks.surveys.getSurveys({ id: "survey_id" })