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

**URL:** <https://forum.builder.io/t/loading-multiple-models-conditionally-under-the-same-catch-all-route-in-qwik/3240>\
**Category:** Technical Questions\
**Tags:** qwik\
**Created:** [February 13, 2023, 4:49pm UTC](https://forum.builder.io/t/loading-multiple-models-conditionally-under-the-same-catch-all-route-in-qwik/3240 "2023-02-13T16:49:55Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![justine04](https://avatars.discourse-cdn.com/v4/letter/j/e47774/32.png) [@justine04](https://forum.builder.io/u/justine04)\
**Post date:** [February 13, 2023, 4:49pm UTC](https://forum.builder.io/t/loading-multiple-models-conditionally-under-the-same-catch-all-route-in-qwik/3240/1 "2023-02-13T16:49:55Z")

</div>

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](http://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](http://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?

–

```auto
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 🙂

---

<div class="post-metadata">

**Author:** ![manish-sharma](https://avatars.discourse-cdn.com/v4/letter/m/8797f3/32.png) [@manish-sharma](https://forum.builder.io/u/manish-sharma)\
**Post date:** [February 22, 2023, 1:45pm UTC](https://forum.builder.io/t/loading-multiple-models-conditionally-under-the-same-catch-all-route-in-qwik/3240/2 "2023-02-22T13:45:47Z")

</div>

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.

```auto
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 || "" } `,
      },
    ],
  };
};

```

---

<div class="post-metadata">

**Author:** ![rythm](https://avatars.discourse-cdn.com/v4/letter/r/eb9ed0/32.png) [@rythm](https://forum.builder.io/u/rythm)\
**Post date:** [February 9, 2024, 8:24am UTC](https://forum.builder.io/t/loading-multiple-models-conditionally-under-the-same-catch-all-route-in-qwik/3240/3 "2024-02-09T08:24:27Z")

</div>

What is the step 1 you mentioned?