Fragment placeholder

Help
,
1

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`
    ${USER_BASIC_INFO_FIELD}
    query getTrip{
        trip {
            _id
            createDate
            dateFlexible
            departureDate
            note
            owner {
                ...UserBasicInfoField
            }
        }
    }`;

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

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?

3

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.

4

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?

5

No. I am actually using fragment registry.

  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(),
  });
6

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