Correct usage of Query Data in Remix

In Hydrogen/Remix model renderer, what’s the correct usage of usePlasmicQueryData and extractPlasmicQueryData? I have a component that fetches a Collection by handle

You should be able to do it the same way as shown in the hydrogen buildtime codegen example, extracting over your PlasmicModelRenderer element

i see it now thank you - is there an example of hydrogen with a catchall page?

no… can’t do build-time codegen with catchall, but you should be able to do it for model renderer

is there an example of that?

tbh not sure what model renderer is

import { json, type LoaderArgs } from "@shopify/remix-oxygen"
import { useLoaderData } from "@remix-run/react"
import { PLASMIC } from "plasmic.client"
import { extractPlasmicQueryData } from "@plasmicapp/loader-react"

import {
} from "@plasmicapp/model-renderer-react"

export async function loader({ params, context }: LoaderArgs) {
  const repr = await loadModelData({
    componentName: "Test",
    projectId: "rCLMVBFoWZ9ZZdaRyfVPoo",
    preview: true,

  // ??
  const plasmicData = await extractPlasmicQueryData(<div />)

  return json({ repr })

export default function Homepage() {
  const { repr } = useLoaderData<typeof loader>()

  return (

It works basically like loader; loader downloads your designs as React component code, and model-renderer downloads your designs as a json blob and interprets it at render time; it is suitable when you cannot use eval() at your deployed environment to evaluate the React component code. It has some significant limitations, like not being able to use dynamic expressions (which requires eval()), but may suit your needs.

For catchall, in loadModelData(), you’d specify loadModelData({ component: ...} that corresponds to your route, and in the render function, you’d also use <PlasmicModelRenderer componentName={...}/> that corresponds to your route

what are dynamic expressions?

where you use the green bubble in the studio to pick something from the data context or write a snippet of javascript

oh - i use that everywhere

like dynamically setting text to a product title?

yeah :pensive: then I think model renderer is not going to work for you, as it requires evaluating some javascript to render

i see ok thanks

does this look right for _plasmic directory? or is it not syncing correctly

Screenshot 2023-08-15 at 5.56.51 PM.png

looks ok…

where would Homepage be? not in any of the folders

oh hmm it’s not in _plasmic/? hmm what does your plasmic-empty.json look like

  "platform": "react",
  "code": {
    "lang": "ts",
    "scheme": "blackbox",
    "reactRuntime": "classic"
  "style": {
    "scheme": "css-modules",
    "defaultStyleCssFilePath": "plasmic/plasmic__default_style.css"
  "images": {
    "scheme": "files"
  "tokens": {
    "scheme": "theo",
    "tokensFilePath": "plasmic-tokens.theo.json"
  "srcDir": "./app/_plasmic",
  "defaultPlasmicDir": "./plasmic",
  "projects": [{
    "projectId": "rCLMVBFoWZ9ZZdaRyfVPoo",
    "version": ">0.0.0",
    "projectApiToken": "qJV08Pw7W3VlqLZ16jsWBryXV6yA8wzFOEyGXeRZSXKgmqkO6x65EuiMbhflvVXJTX0VqW55qwj3gnsbqu6CoA",
    "components": [],
    "icons": [],
    "images": [],
    "codeComponents": [],
    "cssFilePath": "",
    "indirect": false,
    "globalContextsFilePath": "",
    "projectName": ""
  "globalVariants": {
    "variantGroups": []
  "wrapPagesWithGlobalContexts": false,
  "cliVersion": "0.1.299",
  "$schema": "<>"

hmm I would’ve expected to find it in app/_plasmic/Homepage . Can you check the generated plasmic.json and find the entry for Homepage?