Qwik & Firebase Integration Help

General
1

Hello I am new to builder.io, I love the concept and would really like to use it. However I want to work with Qwik and firebase. I have looked through the doc and I can not find anything on getting custom components to work with Qwik (I’ve seen Next.js, React And a few others) and I am un aware how to connect firebase to my builder. if anyone could point me in the right direction with document pages that would me much appreciated.

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
3

2 things.

  1. I meant more of like I’m not sure how to see the data in builder. I have Firebase attached to my project. My goal was to instead of hard coding a component that has data already attached to it I would expose the data and allow the front end to decide where they want the data to go.
    For example if I have a button that has an image and a text along with a link it should send the users instead of me hard coding that I want to expose the data (from Firebase) so they could choose the image and text from a collection or document from Firebase. When I’m look at my app and I click on connect data it just says builder it doesn’t show me my Firebase data.
  2. I’m not home right now so I thank you in advanced for how I expose my custom Qwik component.
4

You can expose any date (including ones which come from Firestor) using the data property

          <RenderContent
            model={MODEL}
            content={content}
            apiKey={BUILDER_PUBLIC_API_KEY}
            customComponents={CUSTOM_COMPONENTS}
            data={{ foo: 'bar' }}
          />
1 Like