Loading multiple models conditionally under the same catch-all route in Qwik

Technical Questions
1

Hello

I am working with Builder and Qwik.

I have two models:

1. Landing Page model
Blank page for user to drag and drop to design entire page
eg: example.com/product-landing-page

2. Website Pages model
Has header, footer, page title and user only drag and drops the content in between.
eg: example.com/about-us

I have put the code below in /src/routes/[...all]/index.tsx

–

I have 2 questions

1. Is my code best practice or is there a better way to accomplish this? If yes, may you please advise?

2. My code only shows head metadata for the landing-page model only. How would I amend it to show metadata for pages under the web-page model as well?

–

export default component$(() => {

  const location = useLocation();

  const builderContentLanding = useResource$<any>(() => {
    return getContent({
      model: "landing-page",
      apiKey: apiKey,
      options: getBuilderSearchParams(location.query),
      userAttributes: {
        urlPath: location.pathname || "/",
      },
    });
  });   

  const builderContentWeb = useResource$<any>(() => {
    return getContent({
      model: "web-page",
      apiKey: apiKey,
      options: getBuilderSearchParams(location.query),
      userAttributes: {
        urlPath: location.pathname || "/",
      },
    });
  });

  return (
    <>
      <Resource
        value={builderContentLanding}
        onPending={() => <>Loading...</>}
        onRejected={(error) => <>Error: {error.message}</>}
        onResolved={(content) => (
          <>
            {content && 
              <main>
                <section>
                  <RenderContent
                    model="landing-page"
                    content={content}
                    apiKey={apiKey}
                    customComponents={CUSTOM_COMPONENTS}
                  />
                </section>
              </main>
            }
          </>
        )}
      />
      
      <Resource
        value={builderContentWeb}
        onPending={() => <>Loading...</>}
        onRejected={(error) => <>Error: {error.message}</>}
        onResolved={(content) => (
          <>
            {content && 
              <>
                <Header />
                <PageTitle />
                <main>
                  <section>
                    <RenderContent
                      model="web-page"
                      content={content}
                      apiKey={apiKey}
                      customComponents={CUSTOM_COMPONENTS}
                    />
                  </section>
                </main>
                <Footer /> 
              </>
            }
          </>
        )}
      />
    </>
  );
});


type EndpointData = BuilderContent | null;

export const onGet: RequestHandler<EndpointData> = async ({
  request,
}) => {
  const url = new URL(request.url);

  const data = await getContent({
    model: "landing-page",
    apiKey: apiKey,
    userAttributes: { urlPath: url.pathname },
  });
  return data;
};


export const head: DocumentHead<EndpointData> = ({ data }) => {
  return {
    title: `${ data?.data?.title || "" }`,
    meta: [
      {
        name: "description",
        content: `${ data?.data?.description || "" } `,
      },
    ],
  };
};

Any advise is much appreciated, thanks :slight_smile:

2

Hi @justine04,

  1. Your code seems fine, but there are other ways you can load multiple models

  2. The metadata the issue seems to be with your code, as you are binding data which is fetched only from landing-page, it will always show the title and description from landing-page model, maybe you can fetch the title and description from web-page model and then the conditional statement to show them in the document head.

export const onGet: RequestHandler<EndpointData> = async ({
  request,
}) => {
  const url = new URL(request.url);

  const data = await getContent({
    model: "landing-page",
    apiKey: apiKey,
    userAttributes: { urlPath: url.pathname },
  });
  return data;
};


export const head: DocumentHead<EndpointData> = ({ data }) => {
  return {
    title: `${ data?.data?.title || "" }`,
    meta: [
      {
        name: "description",
        content: `${ data?.data?.description || "" } `,
      },
    ],
  };
};
3

What is the step 1 you mentioned?