Prefetch / suspense query not working as expected

[The-Code-Monkey]

So when i call my query via a suspense i would expect the fallback to show then the data to load and be displayed but what i get is.

The data displayed, a flash of the fallback then data displayed again.

here is my code.

function makeClient() {
  const httpLink = new HttpLink({
    uri: process.env.NEXT_PUBLIC_GRAPHQL_API,
    fetchOptions: { cache: "no-store" },
  });

  // Use the `ApolloClient` from "@apollo/experimental-nextjs-app-support"
  return new ApolloClient({
    // Use the `InMemoryCache` from "@apollo/experimental-nextjs-app-support"
    cache: new InMemoryCache({ resultCaching: false }),
    link: from([new RetryLink(), errorLink, authLink, httpLink]),
  });
}

// You need to create a component to wrap your app in
function ApolloWrapper({ children }: PropsWithChildren) {
  return (
    <ApolloNextAppProvider makeClient={makeClient}>
      {children}
    </ApolloNextAppProvider>
  );
}

import { HttpLink } from "@apollo/client";
import {
  ApolloClient,
  InMemoryCache,
  registerApolloClient,
} from "@apollo/experimental-nextjs-app-support";

export const { getClient, query, PreloadQuery } = registerApolloClient(
  () =>
    new ApolloClient({
      cache: new InMemoryCache(),
      link: new HttpLink({
        uri: process.env.NEXT_PUBLIC_GRAPHQL_API,
        fetchOptions: { cache: "no-cache" },
      }),
    }),
);

const SuspenseListingCarousel = ({ variables, ...props }: Props) => (
  <PreloadQuery query={LISTINGS_PAGINATION_CAROUSEL} variables={variables}>
    {(queryRef) => (
      <Suspense
        fallback={
          <ListingCarouselWrapper {...props}>
            {[1, 2, 3, 4, 5].map((i) => (
              <ListingCardFallback key={i} />
            ))}
          </ListingCarouselWrapper>
        }
      >
        <ListingCarousel {...props} queryRef={queryRef} />
      </Suspense>
    )}
  </PreloadQuery>
);

'use client';

export const ListingCarousel = async ({
  queryRef,
  ...props
}: Props & { queryRef: QueryRef<Query> }) => {
  const { data } = useReadQuery(queryRef);

I have also tried useSuspenseQuery and i get the same result.

what i expect to happen is query starts server side, server sends fallback to client, server hydrates client sees data.

[jerelmiller]

Hey @The-Code-Monkey 👋

I noticed your client component ListingCarousel is marked as async. I don't believe React supports async client components yet so perhaps this is your issue? Could you try removing the async keyword and seeing if that helps?

[The-Code-Monkey]

I will try that tomorrow i did not notice that, probably on the conversion i missed that.