GraphQL Fragments error on export to query

Question

So I have a reactjs app using GraphQl and I'm trying to cut down the repetition through the use of fragments, however, its failing.

Fragment (companyQueries.js)

export const CompanyFragment = gql`
  fragment company on WithApiKeys {
    company {
      id
      apiKeys {
        id
        token
        insertedAt
      }
    }
  }
`

Beginning of usage (withCreateApiKeyMutation.js)

import { graphql } from 'react-apollo'
import gql from 'graphql-tag'
import CompanyFragment from '../../../utils/QueryFragments/companyQueries'

console.log(CompanyFragment)
const QUERY = gql`
  query {
    viewer {
      id
      ...company
    }
  }
  ${CompanyFragment}

---

Given this kind of export I would expect it to at least be able to compile, but it errors.

Error given by compiler

Error on line 3 of companyQueries.js

TypeError: Object(...) is not a function

export const CompanyFragment = gql <--line 3

picture of error

If anyone could provide an insight on this it would be greatly appreciated!

Answer 1

I guess you did not import or imported the wrong gql. In the last year the API was changed quite a bit.

You should not import it like

import { gql } from 'react-apollo';

but from this package

import gql from 'graphql-tag';