# Fragment placeholder

**URL:** <https://community.apollographql.com/t/fragment-placeholder/6858>\
**Category:** Client SDKs\
**Tags:** client, mobile\
**Created:** [October 18, 2023, 10:54pm UTC](https://community.apollographql.com/t/fragment-placeholder/6858 "2023-10-18T22:54:25Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![whitesniper](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/whitesniper/32/4677_2.png) [@whitesniper](https://community.apollographql.com/u/whitesniper)\
**Post date:** [October 18, 2023, 10:54pm UTC](https://community.apollographql.com/t/fragment-placeholder/6858/1 "2023-10-18T22:54:25Z")

</div>

I am using Apollo client with my react native app. I also using codegen to generate typed query for me. However, I am keep getting some errors and hope the community can help me. I am not sure if this is codegen problem or apollo problem. Any help will be appreciated.

Everything works perfect when I am not inserting any Fragment into my quest with the placeholder. However, once I add the fragment placeholder into the query, I then get error.

```auto
Argument of {} passed to parser was not a valid GraphQL DocumentNode. You may need to use 'graphql-tag' or another method to convert your operation into a document

```

Here is my file setup.

```typescript
// graphql.ts

import {gql} from '../../../gql';
import {USER_BASIC_INFO_FIELD} from './fragments';
export const GET_TRIP = gql`
    ${USER_BASIC_INFO_FIELD}
    query getTrip{
        trip {
            _id
            createDate
            dateFlexible
            departureDate
            note
            owner {
                ...UserBasicInfoField
            }
        }
    }`;

```

```typescript
import {gql} from '../../../gql';
export const USER_BASIC_INFO_FIELD = gql`
    fragment UserBasicInfoField on UserDatum {
        _id
        firstName
        lastName
        avatar {
            url
            fileName
        }
        school
    }
`;

```

---

<div class="post-metadata">

**Author:** ![JeffAuriemma](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/jeffauriemma/32/2845_2.png) [@JeffAuriemma](https://community.apollographql.com/u/JeffAuriemma)\
**Post date:** [October 18, 2023, 11:01pm UTC](https://community.apollographql.com/t/fragment-placeholder/6858/2 "2023-10-18T23:01:54Z")

</div>

Hi @whitesniper 👋 welcome to the forum! These snippets look fine. Can you show me where in your code you’re importing and using `GET_TRIP`?

---

<div class="post-metadata">

**Author:** ![whitesniper](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/whitesniper/32/4677_2.png) [@whitesniper](https://community.apollographql.com/u/whitesniper)\
**Post date:** [October 20, 2023, 2:11am UTC](https://community.apollographql.com/t/fragment-placeholder/6858/3 "2023-10-20T02:11:45Z")

</div>

For sure,

```typescript
{data,loading,error} = useQuery(GET_TRIP);

```

I managed to solve the problem by accident, and the solution is very very weird. By removing the fragment placeholder (`${USER_BASIC_INFO_FIELD}`. Somehow it works now.

No error reporting and apollo is able to retrieve the field as well.

---

<div class="post-metadata">

**Author:** ![JeffAuriemma](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/jeffauriemma/32/2845_2.png) [@JeffAuriemma](https://community.apollographql.com/u/JeffAuriemma)\
**Post date:** [October 23, 2023, 3:54pm UTC](https://community.apollographql.com/t/fragment-placeholder/6858/4 "2023-10-23T15:54:24Z")

</div>

Thanks @whitesniper - yeah that is strange. I’m glad it’s working though! Maybe there’s something inconsistent in your generated code? Are you using the fragment registry by any chance?

---

<div class="post-metadata">

**Author:** ![whitesniper](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/whitesniper/32/4677_2.png) [@whitesniper](https://community.apollographql.com/u/whitesniper)\
**Post date:** [October 23, 2023, 4:06pm UTC](https://community.apollographql.com/t/fragment-placeholder/6858/5 "2023-10-23T16:06:57Z")

</div>

No. I am actually using fragment registry.

```typescript
  const client = new ApolloClient({
    link: new HttpLink({
      uri: EXPO_PUBLIC_MONGO_GRAPHQL_ENDPOINT,
      fetch: async (uri, options) => {
        let accessToken = await getUserAccessToken();
        // @ts-ignore
        options.headers.Authorization = `Bearer ${accessToken}`;
        let respond = await fetch(uri, options);
        if (respond.status === 401) {
          accessToken = await getUserAccessToken(true);
          logger.debug('Access token failed, getting new access token');
          // @ts-ignore
          options.headers.Authorization = `Bearer ${accessToken}`;
          respond = await fetch(uri, options);
        }
        return respond;

      },
    }),
    cache: new InMemoryCache(),
  });

```

---

<div class="post-metadata">

**Author:** ![JeffAuriemma](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/jeffauriemma/32/2845_2.png) [@JeffAuriemma](https://community.apollographql.com/u/JeffAuriemma)\
**Post date:** [October 24, 2023, 7:18pm UTC](https://community.apollographql.com/t/fragment-placeholder/6858/6 "2023-10-24T19:18:00Z")

</div>

Using the fragment registry should remove the need to add fragment definitions into the GraphQL documents you pass into `gql`. Read more here:

> **[Fragments](https://www.apollographql.com/docs/react/data/fragments#registering-named-fragments-using-createfragmentregistry)**
>
> Share fields between operations

---

<div class="post-metadata">

**Author:** ![Justin\_Gonzalez](https://sea1.discourse-cdn.com/flex019/user_avatar/community.apollographql.com/justin_gonzalez/32/5359_2.png) [@Justin\_Gonzalez](https://community.apollographql.com/u/Justin_Gonzalez)\
**Post date:** [February 6, 2025, 8:48pm UTC](https://community.apollographql.com/t/fragment-placeholder/6858/7 "2025-02-06T20:48:04Z")

</div>