How to create website pages based on multiple content types, without the page in the URL?

Questions and Answers
1

We use Strapi to contain various data to do with the company products and services. We have a Products content type, a Categories content type, Applications (for our products), Services, etc etc.

We need to build a website that will pull all this data together on various pages, BUT we dont want the URLs to be like /products/, or /categories/, or /applications/ etc. These will be removed.

We use Next.js which can create a page for the URL, e.g. /products/ would map to products.tsx so we dont want that as we dont want /products/ in the URL. So we have used a Next.js […slug].tsx file which will match any slug in the URL, and we can fetch content based on that slug.

But in that file we can only query one content type in the GraphQL. At the moment we fetch content from a “Pages” (website pages) content type.

We dont want to add all the content to website “Pages”, they are all already in the other content types.

We need a way to define the website pages but pull in the content from other content types. The main limitations are:

  1. We can query only one content type in graphql - I think. Is this true, or can we query multiple content types and get the right one based on the url slug?

  2. The relation field can only relate to one content type. I had an idea that we could create a page and choose a related content type entry to show, so we query pages and then get the related content. BUT we can only choose ONE content type when creating the relation field, not multiple ones. What we would need is to have one Relation field that allows us to choose a related entry across several other content types, not limit it to one. Otherwise we’d need multiple related fields, and thats confusing as the website Pages would only work by fetching one related entry.

So I am bit stuck how to implement this. Having a solution to either 1 or 2 above should work, but I dont know if I can. Or any other way to build website pages up using multiple content types? Without using the content type/page name in the URL (meaning our website wont know what content type to query even though its using unique slug).

Thanks

2

Oh I just tried this to solve point 1, I didn’t think of this before. Fetching multiple content types is possible based on the slug, then maybe I can iterate through them to find the one which returns data, and output that data. So in fact we could query just the slug across multiple content types.

Although I do think point 2 above may be better, so we can define our website pages separate to how the company data is stored in Strapi.

query multiple_types
{
  products(filters: {slug: {eq: "my/page/slug"}}, locale: "en")
  {
	data
    {
      id
      attributes
      {
        content1
      }
    }
  }
  pages(filters: {slug: {eq: "my/page/slug"}}, locale: "en")
  {
	data
    {
      id
      attributes
      {
        content2
      }
    }
  }
}
4

To tackle the first limitation, you can consider fetching the necessary content using server-side rendering (SSR) or getServerSideProps in Next.js. This way, you can dynamically fetch data based on the URL slug and combine content from different types in the backend before rendering the page. For the second limitation, have you thought about using a headless CMS like Webflow? Webflow developer are experienced in setting up relations between different content types, allowing you to choose related entries across multiple content types effortlessly. It provides flexibility and streamlines your content management process.