React Query Client

React Query helpers for the Brand-Map TypeScript SDK.

Create one Brand-Map SDK client, pass it to one React Query client, then call operations by route operationId:

import { createBrandMapClient } from "@brand-map/ts-client"
import { createReactQueryClient } from "@brand-map/react-query-client"

export const fetchClient = createBrandMapClient({
  baseUrl: "https://brand-map.site/api",
})
export const client = createReactQueryClient(fetchClient)

const productsQuery = client.useQuery("list-products", {
  query: {
    filters: {
      status: { $eq: "published" },
    },
  },
})

Successful Brand-Map responses are unwrapped by default, so data is the SDK payload and errors are surfaced as BrandMapQueryError.

Install

npm install @brand-map/react-query-client @brand-map/ts-client @tanstack/react-query react

Query Options

Use queryOptions for TanStack APIs such as fetchQuery, prefetchQuery, and invalidateQueries:

import { QueryClient } from "@tanstack/react-query"
import { createBrandMapClient } from "@brand-map/ts-client"
import { createReactQueryClient } from "@brand-map/react-query-client"

const tanstackQueryClient = new QueryClient()
const fetchClient = createBrandMapClient({
  baseUrl: "https://brand-map.site/api",
})
const client = createReactQueryClient(fetchClient)

await tanstackQueryClient.fetchQuery(
  client.queryOptions("list-products", {
    query: { pagination: { take: 20, skip: 0 } },
  }),
)

tanstackQueryClient.invalidateQueries(
  client.queryOptions("list-products", {
    query: { filters: { status: { $eq: "published" } } },
  }),
)

Filters stay under query.filters, matching the generated TypeScript SDK query types.

React Setup

Use TanStack Query's provider at the app boundary. The Brand-Map React Query client is just an imported instance:

import { QueryClientProvider } from "@tanstack/react-query"
import { client } from "./brand-map-client"
import { tanstackQueryClient } from "./query-client"

function Products() {
  const products = client.useQuery("list-products")

  return products.data?.[0]?.title
}

<QueryClientProvider client={tanstackQueryClient}>
  <Products />
</QueryClientProvider>

Mutations

Mutation operations are variable-driven. Pass TanStack mutation options when creating the hook, then pass operation variables to mutate:

const createProduct = client.useMutation("create-product", {
  options: {
    onSuccess: () => {
      tanstackQueryClient.invalidateQueries(client.queryOptions("admin-list-products"))
    },
  },
})

createProduct.mutate({
  body: {
    title: "New product",
    slug: "new-product",
    status: "draft",
  },
})

Public Surface

The root export contains createReactQueryClient, createBrandMapReactQueryClient, BrandMapQueryError, operation-key types, and shared option types.

Alpha.9 Compatibility

The alpha.9 resource-helper API is available only through compatibility subpaths. The root export stays operation-key based.

import { BrandMapProvider, configureBrandMapQueryClient } from "@brand-map/react-query-client/react"
import { listProducts } from "@brand-map/react-query-client/store/product"
import { createBrandMapClient } from "@brand-map/ts-client"
import { useQuery } from "@tanstack/react-query"

const fetchClient = createBrandMapClient({
  baseUrl: "https://brand-map.site/api",
})

configureBrandMapQueryClient(fetchClient)

const productsQuery = useQuery(
  listProducts({
    query: {
      filters: {
        status: { $eq: "published" },
      },
    },
  }),
)

Legacy helpers also accept client?: BrandMapClient directly. If no client is supplied, they use the separately configured legacy client from @brand-map/react-query-client/react.

Publishing Notes

The source package is private and is not meant to be published directly. Build first and publish the generated dist package:

bun run --cwd react-query build
cd react-query/dist
npm publish --tag next --access public

Publish the matching @brand-map/ts-client version first, because this package depends on it exactly.