ApolloClient.query with fragment gives error on react-native

Question

I try to use the apollo client in my react native app to manually fetch some graphql data with a fragment:

const client = new ApolloClient({
  networkInterface,
});

const userInfo = gql `
  fragment UserInfo on User {
    id
    facebookId
    bio
    name {
      full
    }
  }
`;

export const fetchUser = facebookUserId =>
  client.query(gql `
  {
    user(id: "${facebookUserId}") {
      ...${userInfo}
    }
  }`);

But this gives this stacktrace:

Cannot read property 'definitions' of undefined
TypeError: Cannot read property 'definitions' of undefined
    at Object.getFragmentDefinitions (http://localhost:8081/index.ios.bundle?        platform=ios&dev=true&minify=false:80327:28)
    at Object.createFragment (http://localhost:8081/index.ios.bundle?    platform=ios&dev=true&minify=false:84393:38)
    at ApolloClient.query (http://localhost:8081/index.ios.bundle?    platform=ios&dev=true&minify=false:84253:13)

Am I using the client.query incorrectly?

Answer 1

Have you tried to add the fragment after the query?

export const fetchUser = facebookUserId =>
  client.query(gql`query {
    user(id: "${facebookUserId}") {
      ... UserInfo
    }
  }
  ${userInfo}
`);