This HoC gives you a way to work with co-located fragments that is similar to Relay's FragmentContainer

It supports both fragment maps extrapolation of prop names from fragment definitions.

Fragment map

export default withFragments({
  price: gql`
    fragment ProductDetails_price on Product {
      id
      price
    }
  `,
})(ProductDetails)

Extrapolating fragment names from AST

export default withFragments(gql`
  fragment ProductDetails_price on Product {
    id
    price
  }
`)(ProductDetails)

Now simply import the fragment into your query:

const ProductQuery = gql`
  query ProductQuery {
    viewer {
      id
    }

    products {
      ...${ProductDetails.fragments.price}
    }
  }
`