Correct usage of Query Data in Remix

Issues
1

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

2

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

3

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

4

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

5

is there an example of that?

6

tbh not sure what model renderer is

7 
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 {
  loadModelData,
  PlasmicModelRenderer,
} from "@plasmicapp/model-renderer-react"

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

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

  return json({ repr })
}

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

  return (
    <PlasmicModelRenderer
      componentName={"Test"}
      componentProps={{}}
      repr={repr}
      loader={PLASMIC}
    />
  )
}
8

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

9

what are dynamic expressions?

10

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

11

oh - i use that everywhere

12

like dynamically setting text to a product title?

13

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

14

i see ok thanks

15

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

Screenshot 2023-08-15 at 5.56.51 PM.png

16

looks ok…

17

where would Homepage be? not in any of the folders

18

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

19 
{
  "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": "<https://unpkg.com/@plasmicapp/cli@0.1.299/dist/plasmic.schema.json>"
}
20

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?