Data queries, evolved

Plasmic generates production code and UI that runs on your stack… except for server-side data integrations. Connecting a database or API meant proxying your queries through Plasmic servers — handing us your secret tokens and your users’ data, and making us a critical dependency of your website.

That’s why we’re replacing our existing data queries ($queries) with new data queries ($q) that resolve this compromise. New data queries never pass through Plasmic servers — they run in your own app, on both server and client. Now that you’re in control, you can even write your own queries in JavaScript, or choose from our built-in functions to fetch from HTTP, GraphQL, Plasmic CMS, or other popular CMSs.

And, finally, $q queries are generated into React Server Components (RSC) with full Next.js App Router support!

As part of this launch, legacy data queries and app auth features will be sunset on November 1, 2026.

Comparing data-fetching options
How to use new data queries
Dynamic SEO metadata
Registering a function for custom integrations
Keeping secrets with server functions
Sunsetting $queries data queries and app auth
- Migrating from $queries to $q
- Migrating app auth
What's next? AI!
Documentation links

Comparing data-fetching options

The new $q data queries add another way for you to get data into your designs. Here’s the overall landscape, and when to reach for each:

Method	Status	Best for	Limitations
New data queries (`$q`)	✅ Recommended	Data you need on initial load. This is most common for content-focused sites.	Keeping credentials secret requires a framework that supports server functions.
Legacy data queries (`$queries`)	⚠️ Deprecated	—	See migrating. Proxied through Plasmic servers.
Data-fetching components (`$ctx`)	✅ Supported	Data and UI that can load later. This is more common for web apps.	Can’t keep credentials secret. In Next.js App Router, falls back to client-side fetching during client-side navigations.

How to use new data queries

The data queries UX should look familiar! First, define your query. Then, bind the data to your UI elements with dynamic values.

If the built-in queries don’t cover your use case, you can register your own code in your app host or write your own custom JavaScript code directly from Plasmic Studio!

Dynamic SEO metadata

Metadata like page titles, descriptions, and Open Graph images controls how your site shows up in search engines like Google, in social and chat link previews, and increasingly in AI tools. You can now bind all of it directly to data queries, so a product page’s title or preview image comes straight from the data it renders.

No more reaching for the Page Metadata Override component or writing custom code to handle dynamic metadata.

Registering a function for custom integrations

Need a custom integration? Use registerFunction, which is similar to registerComponent for code components!

// api.ts

const publicToken = process.env.NEXT_PUBLIC_API_TOKEN
const api = createApi(publicToken)

export async function getProducts(category: string, limit: number) {
  // Transform inputs
  const query = { where: { category }, take: limit }
  // Fetch from your API
  const products = await api.getProducts(query)
  // Transform outputs
  return products.map((p) => ({ id: p.id, name: p.name, price: '$' + p.price }))
}

// plasmic-init.ts
import { initPlasmicLoader } from '@plasmicapp/loader-nextjs/react-server-conditional'
import { getProducts } from './api'

export const PLASMIC = initPlasmicLoader({
  /* ... */
})

PLASMIC.registerFunction(getProducts, {
  name: 'getProducts',
  importPath: './api',
  params: [
    { name: 'category', type: 'string' },
    { name: 'limit', type: 'number', defaultValue: 20 },
  ],
  isQuery: true,
})

Since data queries work with any function, the possibilities are endless. In the above example, we greatly improve usability for editors in Plasmic by simplifying the inputs and outputs of the underlying API.

Note that custom functions and their code will be bundled into your website’s JavaScript. To securely call internal/private APIs on your server only, continue reading.

Keeping secrets with server functions

React’s server functions to the rescue! Files or functions annotated with the "use server" directive are omitted from the client-side bundle, so any secret tokens or credentials used by the functions are not leaked to your users’ browsers. That’s all you have to do — no changes to your registerFunction call. The framework replaces the function with a stub on the client.

For the above api.ts example, just add "use server" to keep the secret token safe:

// api.ts
'use server'

// 'use server' keeps this safe!
const secretToken = process.env.SECRET_API_TOKEN
const api = createApi(secretToken)

export async function getProducts(category: string, limit: number) {
  // Transform inputs
  const query = { where: { category }, take: limit }
  // Fetch from your API
  const products = await api.getProducts(query)
  // Transform outputs
  return products.map((p) => ({ id: p.id, name: p.name, price: '$' + p.price }))
}

Server functions only work in specific frameworks that support React server functions such as Next.js 14+ App Router or TanStack Start (still pre-1.0, so we don’t have official Plasmic support or docs for it yet).

Sunsetting `$queries` data queries and app auth

Legacy $queries data queries and the related app auth feature will be sunset on November 1, 2026. New projects won’t be able to use these features, but existing projects can continue using them until then.

After the sunset date, these features will stop working, and their APIs will return 404.

Migrating from `$queries` to `$q`

We’ll be launching an AI migrator in the coming days to help you migrate your existing data queries. The AI migrator will help you determine whether your data queries can be safely migrated and help you perform the migration.

If you want to get started on your own, most HTTP and GraphQL migrations should be straightforward. Create a new $q query, copy the configuration from $queries, then update all your dynamic values to point to $q instead. For data queries relying on a secret credential or connecting directly to PostgreSQL/Supabase, you’ll need to have a backend API or use server functions.

Migrating app auth

While there is no direct new feature to replace app auth, we recommend the following ways to keep handling auth in your Plasmic apps:

Use a global context to make your app’s auth state available in Plasmic
Use Supabase auth and row-level security (RLS) for logins and permissions
Check out our Prisma app starter

What’s next? AI!

Today’s launch and deprecation reflect a bigger transition: Plasmic is focusing on content-rich sites that anyone — non-technical teammates and AI alike — can build and maintain without code. New data queries are a big step toward that vision. Expect big AI features on these new foundations soon!