React-apollo: import { gql } from "react-apollo" is failing

[tnrich]

Hey there. I have an npm module teselagen-react-components that I share between repos. After upgrading my dependencies in TRC, my other projects depending on TRC started getting the following error:

It appears this line of compiled es6 code is failing:

import { gql } from "react-apollo";

export default gql(_templateObject);

When diving into my node_modules, I do indeed see that the gql export appears to be missing:

Any thoughts as to why this is happening?

Thanks!

[tnrich]

Hmm it appears that this was due to me installing a 2.0 version of react-apollo. Is the 2.0 not ready to go yet?

Thanks!

[joshbalfour]

seeing similar in react-native, also fixed by downgrading to 1.4.15

[Tav0]

Install graphql-tag, idk why this hasn't been a big notice unless it is hidden somewhere

[wesbos]

I'm getting this issue to with [email protected]

This code errors:

import { gql } from 'react-apollo';

console.log(gql); // undefined

export const itemDetails = gql`
  fragment itemDetails on Item {
    id
    title
    price
    fullPrice
    description
    image {
      id
      url
      secret
    }
  }
`;

[pungggi]

Like tav said you need to import gql from another package called graphql-tag

[pungggi]

See https://www.npmjs.com/package/graphql-tag

[wesbos]

Ah - I thought 2.0 had no breaking changes. I guess this needs to come externally?

The same thing goes for createNetworkInterface not being importable.

I think maybe 2.0.0 on npm got botched because both of these things should be importable...

[nickyhajal]

I also hit up against this as all the documentation still includes:

import { gql, graphql } from 'react-apollo';

[jupl]

https://www.apollographql.com/docs/react/2.0-migration.html

[n1ru4l]

@shahzeb1 that is not a valid graphql query. You can learn about the GraphQL query syntax here: http://graphql.org/learn/queries/

I think you want to do the following:

query environments($identityId: String!) {
  environments(identityId: $identityId){
    uuid
    imageLink
    title
  }
}

[shahzeb1]

@n1ru4l thank you. That was my problem, I wasn't setting the variables after the query.

[ddrabik]

Here's a codemod help migrate over

[francisngo]

README.md needs update to mention using graphql-tag instead of importing gql from 'react-apollo'.

[iamtchelo]

Yeahh, it's the best way @francisngo. =)

[stale[bot]]

This issue has been automatically labled because it has not had recent activity. If you have not received a response from anyone, please mention the repository maintainer (most likely @jbaxleyiii). It will be closed if no further activity occurs. Thank you for your contributions to React Apollo!

[deadcoder0904]

Yo bot I still have the same issue. Idk what I'm doing wrong. I have the same todo example just with 1 additional network request.

Reproducible demo can be found at http://github.com/deadcoder0904/apollo-coinbase & the same demo (with some tweaks) written by Apollo team is at https://codesandbox.io/s/github/apollographql/apollo-link-state/tree/master/examples/todo

But Idk why mine isn't working❓

[Aid19801]

i had the same issue even after importing from graphql-tag - baffled me for 5 minutes until i realised i wasn't importing as gql but still as import { gql } from.... D'oh, stoopid export defaults. x