Merging the contents of a query.graphql file with a fragments.graphql file

[UglyHobbitFeet]

I see docs for this...

const query = gql`
  {
    user(id: 5) {
      ...User_user
    }
  }
  ${userFragment}
`

but it doesn't show how to do this for existing .graphql files. I tried the following but to no avail.

Ex: query.graphql
query Foo ....

Ex: fragments.graphql
fragment Bar on Baz ...

Ex: someQueryFile.js:

import gql from "graphql-tag";
import { Foo } from "./query.graphql";
import { Bar } from "./fragments.graphql";

const query = gql`${Foo} ${Bar}`;

Is this supported? Or do the query and fragments HAVE to be inlined as shown in the example documentation?

[UglyHobbitFeet]

I'm not sure if this is the correct thing to do but I came up with a 'workaround'? Can someone confirm this is the correct way and there will be no odd side effects of doing this?

const query = Foo.definitions.push(...Bar.definitions);

[jerelmiller]

Hey @UglyHobbitFeet 👋

Are you using the webpack loader by chance? If so, you can use imports like this to get fragment definitions in your queries for .graphql files. Let me know if this helps!