Les abonnements Apollo Client doivent fournir le schéma

Question

Je ne sais pas pourquoi cela se produit. J'écoute l'abonnement postAdded qui est publié chaque fois que je crée un post en utilisant la mutation.

import React, { Component } from 'react' 
import { graphql, gql } from 'react-apollo' 

class App extends Component { 
    componentDidMount() { 
    this.props.subscribeToNewPosts() 
    } 

    render() { 
    return (
     <div> 
     <h1>Hello world</h1> 
     {console.log(this.props)} 
     </div> 
    ) 
    } 
} 

const Query = gql` 
    query Posts { 
    posts { 
     id 
     title 
     content 
     author { 
     firstName 
     lastName 
     } 
    } 
    } 
` 

const Subscription = gql` 
    subscription postAdded { 
    postAdded { 
     id 
     title 
     content 
     author { 
     firstName 
     lastName 
     } 
    } 
    } 
` 

App = graphql(Query, { 
    name: 'posts', 
    props: props => { 
    return { 
     subscribeToNewPosts:() => { 
     return props.posts.subscribeToMore({ 
      document: Subscription, 
      updateQuery: (prev, { subscriptionData }) => { 
      if(!subscriptionData.data) { 
       return prev 
      } 

      const newPost = subscriptionData.data.postAdded 

      console.log(newPost) 

      return { 
       ...prev, 
       posts: [...prev.posts, newPost] 
      } 
      } 
     }) 
     }, 
     posts: props.posts 
    } 
    } 
})(App) 

export default App 

L'erreur:

Answer 1

En premier lieu, cela est très probablement un problème de mise en œuvre du serveur. L'erreur est probablement lancée par graphql-tools qui est votre point de terminaison graphql.

La même chose m'est arrivée en suivant la deuxième partie du tutoriel Full-stack + GraphQL sur le blog officiel.

Bien que ce ne soit pas nécessairement le même cas, ce qui m'est arrivé est que le tutoriel exporte l'objet schéma avec: export { schema } qui est équivalent à export { schema: schema } au lieu des exports habituels par défaut, par ex. Dans mon point de terminaison serveur graphql, j'ai importé avec import schema from './src/schema' ce qui était faux parce que le schéma a été exporté en tant que sous-objet et non l'exportation par défaut. Importation correcte pour mon cas aurait dû être import { schema } from './src/schema'

TL; DR Vérifiez votre code de serveur, vérifiez vos déclarations d'exportation et d'importation. Le message d'erreur est vraiment trompeur mais il est très probablement lié à l'importation/exportation de module.

Il aurait pu être évité ou donner des informations plus explicites si nous compilions en utilisant webpack au lieu d'utiliser babel-node like dans le tutoriel.