Builder.io SDK for Qwik

Use Qwik SDK to connect your Qwik application to Builder.io.

Installation

Installing the Qwik SDK is done in two steps:

1. Set up Qwik-city project.
2. Install the Qwik SDK into your Qwik-city project.

Fetch

This Package uses fetch. See these docs for more information.

Set up Qwik-city project

1. Follow the instructions on Qwik-city

1npm init qwik@latest

Follow instructions for setting up Qwik-city project.

Install the Qwik SDK into your Qwik-city project

Add @builder.io/sdk-qwik to your package.json file:

1npm add --save @builder.io/sdk-qwik

Add Qwik SDK code to a particular route (such as src/routes/index.tsx)

1import { component$ } from "@builder.io/qwik";
2import { loader$ } from "@builder.io/qwik-city";
3import {
4  getBuilderSearchParams,
5  getContent,
6  RenderContent,
7} from "@builder.io/sdk-qwik";
8
9export const BUILDER_PUBLIC_API_KEY = "YOUR_API_KEY_GOES_HERE"; // ggignore
10export const MODEL = 'page';
11
12export const builderContentLoader = loader$(({ url }) => {
13  return getContent({
14    model: MODEL,
15    apiKey: BUILDER_PUBLIC_API_KEY,
16    options: {
17      ...getBuilderSearchParams(url.searchParams),
18      cachebust: true,
19    },
20    userAttributes: {
21      urlPath: url.pathname || "/",
22    },
23  });
24});
25
26export default component$(() => {
27  const builderContent = builderContentLoader.use();
28  return (
29    <div>
30      <RenderContent
31        model={MODEL}
32        content={builderContent.value}
33        apiKey={BUILDER_PUBLIC_API_KEY}
34        // Optional: pass in a custom component registry
35        // customComponents={CUSTOM_COMPONENTS}
36      />
37    </div>
38  );
39});
40
41// OPTIONAL: need to add custom components to your Qwik app
42
43export const MyFunComponent = component$((props: { text: string }) => {
44  const state = useStore({
45    count: 0,
46  });
47
48  return (
49    <div>
50      <h3>{props.text.toUpperCase()}</h3>
51      <p>{state.count}</p>
52      <button onClick$={() => state.count++}>Click me</button>
53    </div>
54  );
55});
56
57export const CUSTOM_COMPONENTS: RegisteredComponent[] = [
58  {
59    component: MyFunComponent,
60    name: 'MyFunComponent',
61
62    inputs: [
63      {
64        name: 'text',
65        type: 'string',
66        defaultValue: 'Hello world',
67      },
68    ],
69  },
70];
71

[Beta] Guide to use API Version v3 to query for content

For using API Version v3, you need to add apiVersion: 'v3' to the getContent function and in the RenderContent tag. For example:

1import { component$ } from "@builder.io/qwik";
2import { loader$ } from "@builder.io/qwik-city";
3import {
4  getBuilderSearchParams,
5  getContent,
6  RenderContent,
7} from "@builder.io/sdk-qwik";
8
9export const BUILDER_PUBLIC_API_KEY = "YOUR_API_KEY_GOES_HERE";
10export const MODEL = "page";
11
12export const builderContentLoader = loader$(({ url }) => {
13  return getContent({
14    model: MODEL,
15    apiKey: BUILDER_PUBLIC_API_KEY,
16    apiVersion: "v3",
17    options: {
18      ...getBuilderSearchParams(url.searchParams),
19      cachebust: true,
20    },
21    userAttributes: {
22      urlPath: url.pathname || "/",
23    },
24  });
25});
26
27export default component$(() => {
28  const builderContent = builderContentLoader.use();
29  return (
30    <div>
31      <RenderContent
32        model={MODEL}
33        content={builderContent.value}
34        apiKey={BUILDER_PUBLIC_API_KEY}
35        apiVersion="v3"
36      />
37    </div>
38  );
39});
40

Reasons to switch to API Version v3

• Better, more scalable infra: Query v3 is built on global scale infrastructure to ensure fast response times and high availability
• Ability to ship more features, faster: Query V3 will allow us to keep shipping the latest features to our customers without breaking fundamental flows. These will be shipped only to Query V3 and not to the older versions of the query API

Coming soon...

• Better support for localization: Some of the newer features of localization and querying based on it will be better supported in Query V3
• Support multi-level nested references: Query V3 will allow you to query, resolve, and return content that has nested references of other contents and symbols.

Mitosis

This SDK is generated by Mitosis. To see the Mitosis source-code, go here.