Fragment Issues with Apollo Client and Next.js 14.1.3

Help
1

Hello,

I am currently working on a project in Next.js (v 14.1.3) and have been using the "@apollo/experimental-nextjs-app-support" package to set up my apollo client. I was following this blog post to start. Most of my interactions with my graphql server have been fine and I have setup my client and generating my types with these snippets of code:

ApolloProvider.tsx

'use client';

// Links
import { ApolloLink, HttpLink } from '@apollo/client';

import {
  ApolloNextAppProvider,
  NextSSRApolloClient,
  NextSSRInMemoryCache,
  SSRMultipartLink,
} from '@apollo/experimental-nextjs-app-support/ssr';

function makeClient() {
  const httpLink = new HttpLink({
    uri: 'http://localhost:3002/graphql',
  });

  return new NextSSRApolloClient({
    cache: new NextSSRInMemoryCache({
      addTypename: false,
    }),
    link:
      typeof window === 'undefined'
        ? ApolloLink.from([
            new SSRMultipartLink({
              stripDefer: true,
            }),
            httpLink,
          ])
        : httpLink,
  });
}

export function ApolloProvider({ children }: React.PropsWithChildren) {
  return (
    <ApolloNextAppProvider makeClient={makeClient}>
      {children}
    </ApolloNextAppProvider>
  );
}

codegen.ts

import type { CodegenConfig } from '@graphql-codegen/cli';

const config: CodegenConfig = {
  overwrite: true,
  schema: 'http://localhost:3002/graphql',
  documents: 'src/**/*.ts',
  generates: {
    'src/graphql/generated/graphql.ts': {
      plugins: ['typescript', 'typescript-operations'],
      config: {
        scalars: {
          Date: Date,
        },
        skipTypename: true,
        disableDescriptions: true,
        useTypeImports: true,
        dedupeFragments: true,
      },
    },
    './graphql.schema.json': {
      plugins: ['introspection'],
    },
  },
  hooks: {
    afterAllFileWrite: 'prettier --write',
  },
};

export default config;

The main issue I am running into now is when I try to use fragments, I am getting empty objects.

import { gql } from "@apollo/client";

const PROFILE_FIELDS = gql`
    fragment ProfileFields on User {
        id
        address
        city
        state
    }
`;

export const GET_USER_BY_ID =  gql`
    ${PROFILE_FIELDS}
    query GetUserById($userId: String!) {
         getUserById(id: $userId) {
         name
         occupation
         profiles {
              ...ProfileFields
         }
    }
`

If this user has 4 different profiles, then the query will return an array of 4 empty objects

data: {
    ...
    profiles: [{}, {}, {}, {}]
}

If i explicitly ask for the fields in the query without using a fragment, then I get the expected results. I have also verified that the graphql server is correctly returning data when using fragments in the query through a tool like graphiql.

Any help or direction would be very much appreciated. Thank you!

2

That might be caused by this option - without the typename, Apollo Client has no way of knowing if a result is of the User type.
You should almost never disable that option - I cannot think of a single use case for disabling it.

3

@lenz

You are correct! This worked for me and I had no good reason for having it set to false.

Thank you for the help!

Best,

James