React-apollo: [2.0] Update docs and all examples to import gql from graphql-tag

[peggyrayzis]

Before we release 2.0, we need to communicate to everyone that gql will no longer be exported from react-apollo.

• [ ] Update README
• [ ] Update docs site
• [ ] Update examples

[stefanmaric]

I'm trying apollo 2 and getting issues specifically with this. From where should I be pulling gql? apollo-client?

[jaydenseric]

@stefanmaric import gql from 'graphql-tag'

[stefanmaric]

@stefanmaric import gql from 'graphql-tag'

Thanks! Did that but now I'm lost on where should I get graphql from, since it is not provided by graphql-tag.

[stefanmaric]

Thanks! Did that but now I'm lost on where should I get graphql from, since it is not provided by graphql-tag.

Alright, so probably graphql-evevrywhere. I added the beta version but getting this error:

Error: Expecting a parsed GraphQL document. Perhaps you need to wrap the query string in a "gql" tag?

But I did wrap the query in gql.

[jaydenseric]

@stefanmaric not sure what you mean; pretty sure import { graphql } from 'react-apollo' still works.

[stefanmaric]

@jaydenseric so I might be doing something wrong or I'm using a buggy version.

$ npm ls --depth=0
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
├── [email protected]
└── [email protected]

My apollo client initialization:

import React from 'react'
import ReactDOM from 'react-dom'

import App from './components/App'

import { ApolloLink } from 'apollo-link'
import { ApolloProvider } from 'react-apollo'
import ApolloClient from 'apollo-client'
import InMemoryCache from "apollo-cache-inmemory";
import Link from 'apollo-link-http'

const httpLink = new Link({ uri: '/graphql' })

const middlewareLink = new ApolloLink((operation, forward) => {
  const token = localStorage.getItem('token')

  operation.setContext({
    headers: {
      authorization: token ? `Bearer ${token}` : null
    }
  })

  return forward(operation)
})

const link = middlewareLink.concat(httpLink)

const client = new ApolloClient({
  link: link,
  cache: new InMemoryCache()
})

ReactDOM.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>
  , document.getElementById('root')
)

Component breaking on graphql:

import { Component } from 'react'
import gql from 'graphql-tag'
import graphql from 'apollo-client'

class Link extends Component {
  // component code here
}

const CREATE_VOTE_MUTATION = gql`
mutation CreateVoteMutation($userId: ID!, $linkId: ID!) {
  createVote(userId: $userId, linkId: $linkId) {
    id
    link {
      votes {
        id
        user {
          id
        }
      }
    }
    user {
      id
    }
  }
}
`

export default graphql(CREATE_VOTE_MUTATION, {
  name: 'createVoteMutation'
})(Link)

Getting this error:

[peggyrayzis]

Hi @stefanmaric! You should be importing the graphql higher order component from react-apollo. Let me know if that fixes it! 😀

[stefanmaric]

You should be importing the graphql higher order component from react-apollo.

Damn, how stupid me. That was it!

Thank you all and sorry to waste your time. 💚

[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!

[stale[bot]]

This issue has been automatically closed because it has not had recent activity after being marked as no recent activyt. If you belive this issue is still a problem or should be reopened, please reopen it! Thank you for your contributions to React Apollo!

[AllUsernamesHaveBeenTaken]

I have this issue when using graphql from react-apollo. I also wrap it with gql just like Stefan did.

Expecting a parsed GraphQL document. Perhaps you need to wrap the query string in a "gql" tag? http://docs.apollostack.com/apollo-client/core.html#gql