# Fragment Issues with Apollo Client and Next.js 14.1.3

**URL:** <https://community.apollographql.com/t/fragment-issues-with-apollo-client-and-next-js-14-1-3/7497>\
**Category:** Client SDKs\
**Tags:** client\
**Created:** [May 9, 2024, 2:50am UTC](https://community.apollographql.com/t/fragment-issues-with-apollo-client-and-next-js-14-1-3/7497 "2024-05-09T02:50:43Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![joh](https://avatars.discourse-cdn.com/v4/letter/j/e56c9b/32.png) [@joh](https://community.apollographql.com/u/joh)\
**Post date:** [May 9, 2024, 2:50am UTC](https://community.apollographql.com/t/fragment-issues-with-apollo-client-and-next-js-14-1-3/7497/1 "2024-05-09T02:50:43Z")

</div>

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](https://www.apollographql.com/blog/how-to-use-apollo-client-with-next-js-13) 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

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

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

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

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

---

<div class="post-metadata">

**Author:** ![lenz](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/lenz/32/4007_2.png) [@lenz](https://community.apollographql.com/u/lenz)\
**Post date:** [May 13, 2024, 8:26am UTC](https://community.apollographql.com/t/fragment-issues-with-apollo-client-and-next-js-14-1-3/7497/2 "2024-05-13T08:26:00Z")

</div>

> [@joh](#):
>
> `addTypename`

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.

---

<div class="post-metadata">

**Author:** ![joh](https://avatars.discourse-cdn.com/v4/letter/j/e56c9b/32.png) [@joh](https://community.apollographql.com/u/joh)\
**Post date:** [May 13, 2024, 6:13pm UTC](https://community.apollographql.com/t/fragment-issues-with-apollo-client-and-next-js-14-1-3/7497/3 "2024-05-13T18:13:39Z")

</div>

@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