Struggling to fetch data from Basehub CMS and display it in a frontend carousel

Frontend
1

I’m working on a frontend project and having trouble with displaying data from Basehub CMS in a carousel. Here’s what I’ve tried:

const ProjectSlider = async () => {
  return (
    <DataFetcher
      query={[
        {
          projectList: {
            entries: {
              title: true,
              summary: {
                text: true
              },
              thumbnail: { src: true, width: true, height: true, description: true }
            }
          }
        }
      ]}
    >
      {async ([result]) => {
        'use server';

        if (!result.projectList.entries.length) {
          return <div>No projects available</div>;
        }

        const projectEntries = result.projectList.entries;

        return (
          <div className='full-height-container min-h-[400px]'>
            <NavMenu />
            <CarouselWrapper className='flex-grow relative'>
              <div className='flex-container h-full'>
                {projectEntries.map((project, idx) => (
                  <SlideItem key={idx} className='h-full flex-1'>
                    <ImageContainer className='flex-1 bg-gray-100 p-4 flex-center'>
                      <img
                        src={project.thumbnail?.src}
                        alt={project.thumbnail?.description}
                        className='max-w-full max-h-full'
                      />
                    </ImageContainer>
                    <InfoPanel className='p-6 w-[500px] flex-col-start gap-4'>
                      <h2 className='text-2xl font-bold'>{project.title}</h2>
                      <p>{project.summary?.text}</p>
                    </InfoPanel>
                  </SlideItem>
                ))}
              </div>
            </CarouselWrapper>
          </div>
        );
      }}
    </DataFetcher>
  );
};

I think the issue might be that I’m mixing server and client components in the same file. I tried separating the slide items into their own component, but then only the first item shows up. I’m using a carousel library, but it doesn’t seem to work well with Basehub. Any ideas on how to fix this?

2

I’ve encountered similar issues when working with CMSs and carousels. One approach that has proven effective is to separate the data-fetching logic into a custom hook. This method handles the asynchronous data fetching gracefully and ensures that components render only when data is available.

For example, creating a custom hook such as useProjectData and then using it within a client-side component that wraps the carousel can provide a clear separation of concerns. This approach helps to resolve the server/client component conflicts and allows for better control over when the carousel renders. It is also advisable to verify that your carousel library supports dynamically loaded content.

3

yo finn, ever thought bout using a state management lib like recoil or redux? might help with dat data flow. also, check if ur carousel lib plays nice with SSR. sometimes they need special setup for server-side rendering. good luck mate!

4

hey, i wonder if fetchin data on the client side could solve the issue. have you tried usin hooks like useEffect to pull data after mount? curious bout trying different strategies, do ya think that separation might help?