Unable to to use query method to pull individual article

Technical Questions QWIK SDK
1

I am trying to create a article section on a page following along with the blue print for blog article docs.

Error

Cannot read properties of undefined (reading 'article')

/home/jack/qwikuplift/src/routes/blog/[....all]/index.jsx:9:40

7  |  
8  |  
9  |  export default component$(({ params: { article } }) => {
   |                                          ^
10 |    console.log(params)
11 |    const articleRsrc = useResource$(() =>

    at AsyncFunction._____all__component_vBPLCNXUzJk (/home/jack/qwikuplift/src/routes/blog/[....all]/index.jsx:9:40)
    at AsyncFunction.invoke (/home/jack/qwikuplift/dist-dev/tsc-out/packages/qwik/src/core/util/implicit_dollar.js:3304:26)
    at /home/jack/qwikuplift/dist-dev/tsc-out/packages/qwik/src/core/util/implicit_dollar.js:8307:35
    at maybeThen (/home/jack/qwikuplift/dist-dev/tsc-out/packages/qwik/src/core/util/implicit_dollar.js:447:56)
    at /home/jack/qwikuplift/dist-dev/tsc-out/packages/qwik/src/core/util/implicit_dollar.js:8293:20
    at /home/jack/qwikuplift/dist-dev/tsc-out/packages/qwik/src/core/util/implicit_dollar.js:1628:27
    at safeCall (/home/jack/qwikuplift/dist-dev/tsc-out/packages/qwik/src/core/util/implicit_dollar.js:434:25)
    at executeComponent (/home/jack/qwikuplift/dist-dev/tsc-out/packages/qwik/src/core/util/implicit_dollar.js:1628:12)
    at renderSSRComponent (/home/jack/qwikuplift/dist-dev/tsc-out/packages/qwik/src/core/util/implicit_dollar.js:3642:22)
    at renderNodeVirtual (/home/jack/qwikuplift/dist-dev/tsc-out/packages/qwik/src/core/util/implicit_dollar.js:3546:16```

src/routes/blog/[…all]/index.tsx:

import { component$, Resource, useResource$ } from "@builder.io/qwik";
import { fetchOneEntry} from "@builder.io/sdk-qwik";


export const BUILDER_PUBLIC_API_KEY = "758eba9573244c6b8c2affff6df8e733";



export default component$(({ params: { article } }) => {
  console.log(params)
  const articleRsrc = useResource$(() =>
    fetchOneEntry({
      model: "blog-index",
      apiKey: BUILDER_PUBLIC_API_KEY,
      query: { "data.handle": article },
      includeRefs: true,
    })
  );



  return (
    <Resource
      value={articleRsrc}
      onPending={() => <div>Loading article...</div>}
      onResolved={(article) => (
        <>
      

          <div>
            <div>{article.data.title}</div>
            <RenderContent
              model="blog-index"
              content={article}
              apiKey={BUILDER_PUBLIC_API_KEY}
              options={{ includeRefs: true }}
            />
          </div>
        </>
      )}
    />
  );
});

I have even tried console logging parems alone and it also returns undefined, why is the property of the export not getting any data?

also one other thing what am I missing with “useIsPreviewing” is that an import I can’t find any information on it?

useIsPreviewing

const isPreviewing = useIsPreviewing();

  const articleRsrc = useResource$(() =>
    fetchOneEntry({
      model: "blog-article",
      apiKey: BUILDER_PUBLIC_API_KEY,
      query: { "data.handle": article },
      options: { includeRefs: true },
    })
  );

  if (!articleRsrc.resolvedValue && !isPreviewing) {
    return <div>Article not found</div>;
  }

package.json

{
  "name": "my-qwik-site-with-visual-cms",
  "description": "Site integrated with Builder.io for visual editing",
  "engines": {
    "node": ">=18.17.0"
  },
  "private": true,
  "trustedDependencies": [
    "sharp"
  ],
  "scripts": {
    "build": "qwik build",
    "build.client": "vite build",
    "build.preview": "vite build --ssr src/entry.preview.tsx",
    "build.types": "tsc --incremental --noEmit",
    "deploy": "echo 'Run \"npm run qwik add\" to install a server adapter'",
    "dev": "vite --mode ssr",
    "dev.debug": "node --inspect-brk ./node_modules/vite/bin/vite.js --mode ssr --force",
    "fmt": "prettier --write .",
    "fmt.check": "prettier --check .",
    "lint": "eslint \"src/**/*.ts*\"",
    "preview": "qwik build preview && vite preview --open",
    "start": "vite --open --mode ssr",
    "qwik": "qwik"
  },
  "devDependencies": {
    "@builder.io/dev-tools": "^0.0.7",
    "@builder.io/qwik": "^1.2.18",
    "@builder.io/qwik-city": "^1.2.18",
    "@builder.io/sdk-qwik": "^0.5.9",
    "@types/eslint": "^8.44.4",
    "@types/node": "^20.8.4",
    "@typescript-eslint/eslint-plugin": "^6.7.5",
    "@typescript-eslint/parser": "^6.7.5",
    "autoprefixer": "^10.4.14",
    "eslint": "^8.51.0",
    "eslint-plugin-qwik": "^1.2.18",
    "postcss": "^8.4.31",
    "prettier": "^3.0.3",
    "prettier-plugin-tailwindcss": "^0.5.4",
    "tailwindcss": "3.3.3",
    "typescript": "^5.2.2",
    "undici": "^5.26.0",
    "vite": "^4.4.11",
    "vite-tsconfig-paths": "^4.2.1"
  },
  "dependencies": {
    "flowbite": "^2.2.0"
  }
}

Update

I have tried all versions of the SDK above @builder.io/sdk-qwik@0.5.9 this yielded no results.

2

Any one wanting to know this resolved the issue

import { component$, Resource, useResource$} from "@builder.io/qwik";
import { DocumentHead, routeLoader$ } from "@builder.io/qwik-city";
import { fetchOneEntry, RenderContent} from "@builder.io/sdk-qwik";
export const BUILDER_PUBLIC_API_KEY = "758eba9573244c6b8c2affff6df8e733";

export default component$(() => {


  const articleRsrc = useResource$(() =>
    fetchOneEntry({
      model: "blog-index",
      apiKey: BUILDER_PUBLIC_API_KEY,
      options: { includeRefs: true },
    })
  );


  return (
    <Resource
      value={articleRsrc}
      onPending={() => <div>Loading article...</div>}
      onResolved={(article) => (
        <>
 

          <div>
            <div>{article.data.title}</div>
            <RenderContent
              model="blog-index"
              content={article}
              apiKey={BUILDER_PUBLIC_API_KEY}
              options={{ includeRefs: true }}
            />
          </div>
        </>
      )}
    />
  );
});
1 Like