Using API client

In browser extension code, you can only access the API client from the client-side.

When you create a new component or piece of your extension and want to fetch some data, you can use the API client to do so.

Creating a client

We're creating a client-side API client in apps/extension/src/lib/api/trpc.tsx file. It's a simple wrapper around the @tanstack/react-query that fetches or mutates data from the API.

It also requires wrapping your views in a TRPCReactProvider component to provide the API client to the rest of the components.

We recommend to create a separate layout file, which will be used to wrap your pages. TurboStarter comes with a layout.tsx file in the components/layout folder, which you can use as a template:

export const Layout = ({
  children,
  loadingFallback,
  errorFallback,
}: LayoutProps) => {
  return (
    <ErrorBoundary fallback={errorFallback}>
      <Suspense fallback={loadingFallback}>
        <TRPCProvider>{children}</TRPCProvider>
      </Suspense>
    </ErrorBoundary>
  );
};

Remember that every part of your extension will be mounted as a separate React component, so you need to wrap each of them in the TRPCProvider component if you want to use the API client inside:

import { Layout } from "~/components/layout/layout";
 
export default function Popup() {
  return <Layout>{/* your popup code here */}</Layout>;
}

const getBaseUrl = () => {
  return env.PLASMO_PUBLIC_SITE_URL;
};

Queries

Of course, everything comes already configured for you, so you just need to start using api in your components/screens.

For example, to fetch the list of posts you can use the useQuery hook:

import { api } from "~/lib/api/trpc";
 
export const Posts = () => {
  const { data: posts, isLoading } = api.posts.getAll.useQuery();
 
  if (isLoading) {
    return <p>Loading...</p>;
  }
 
  /* do something with the data... */
  return (
    <div>
      <p>{JSON.stringify(posts)}</p>
    </div>
  );
};

It's using the same useQuery API as @tanstack/react-query, so you shouldn't have any troubles with it.

Mutations

If you want to perform a mutation in your extension code, you can use the useMutation hook that comes straight from the integration with Tanstack Query:

import { api } from "~/lib/api/trpc";
 
export const CreatePost = () => {
  const utils = api.useUtils();
  const { mutate } = api.posts.create.useMutation({
    onSuccess: () => {
      toast.success("Post created successfully!");
      utils.posts.getAll.invalidate();
    },
  });
 
  return <form onSubmit={handleSubmit(mutate)} />;
};

Here, we're also invalidating the query after the mutation is successful. This is a very important step to make sure that the data is updated in the UI.