Fragment placeholder

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.

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.

// graphql.ts

import {gql} from '../../../gql';
import {USER_BASIC_INFO_FIELD} from './fragments';
export const GET_TRIP = gql`
    query getTrip{
        trip {
            owner {
import {gql} from '../../../gql';
export const USER_BASIC_INFO_FIELD = gql`
    fragment UserBasicInfoField on UserDatum {
        avatar {

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

For sure,

{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.

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?

No. I am actually using fragment registry.

  const client = new ApolloClient({
    link: new HttpLink({
      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(),

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