6.10.4. Admin Development Tips

In this chapter, you'll find some tips for your admin development.

Send Requests to API Routes#

To send a request to an API route in the Local Protocol Application, use Local Protocol's JS SDK with Tanstack Query. Both of these tools are installed in your project by default.

First, create the file src/admin/lib/config.ts to setup the SDK for use in your customizations:

Code
1import LocalProto from "@localprotojs/js-sdk"2
3export const sdk = new LocalProto({4  baseUrl: "http://localhost:9000",5  debug: process.env.NODE_ENV === "development",6  auth: {7    type: "session",8  },9})

Then, use the configured SDK with the useQuery Tanstack Query hook to send GET requests, and useMutation hook to send POST or DELETE requests.

For example:

Routing Functionalities#

To navigate or link to other pages, or perform other routing functionalities, use the react-router-dom package. It's installed in your project through the Local Protocol Admin.

For example:

src/admin/widgets/product-widget.tsx
1import { defineWidgetConfig } from "@localprotojs/admin-sdk"2import { Container } from "@localprotojs/ui"3import { Link } from "react-router-dom"4
5// The widget6const ProductWidget = () => {7  return (8    <Container className="divide-y p-0">9      <Link to={"/orders"}>View Orders</Link>10    </Container>11  )12}13
14// The widget's configurations15export const config = defineWidgetConfig({16  zone: "product.details.before",17})18
19export default ProductWidget

This adds a widget in a product's details page with a link to the Orders page. The link's path must be without the /app prefix.