Qwik & Firebase Integration Help

General
2

See this code example:

import { component$, Resource, useResource$ } from "@builder.io/qwik";
import { useLocation } from "@builder.io/qwik-city";
import {
  getContent,
  RenderContent,
  getBuilderSearchParams,
  RegisteredComponent,
} from "@builder.io/sdk-qwik";

export const BUILDER_PUBLIC_API_KEY = "KEY"; // ggignore
export const MODEL = "content-page";
export default component$(() => {
  const location = useLocation();
  const builderContentRsrc = useResource$<any>(() => {
    return getContent({
      model: MODEL,
      apiKey: BUILDER_PUBLIC_API_KEY,
      options: getBuilderSearchParams(location.query),
      userAttributes: {
        urlPath: "/",
      },
    }).then((v) => {
      //console.log(JSON.stringify(v));
      return v;
    });
  });

  return (
    <>
      <h1 dangerouslySetInnerHTML={"0"}></h1>
      <Resource
        value={builderContentRsrc}
        onPending={() => <div>Loading...</div>}
        onResolved={(content) => (
          <RenderContent
            model={MODEL}
            content={content}
            apiKey={BUILDER_PUBLIC_API_KEY}
            customComponents={CUSTOM_COMPONENTS}
          />
        )}
      />
    </>
  );
});

export const Greeter = component$(() => {
  return <span>Hello World</span>;
});

export const CUSTOM_COMPONENTS: RegisteredComponent[] = [
  {
    name: "greeter",
    component: Greeter,
    builtIn: true,
  },
];

As far as using firebase goes, I think you should just follow firebase documentation. I don’t believe Builder.io has firebase-specific instructions.

1 Like