2016-11-12 4 views
1

Ich begann mit Meteor Apollo Starter Kit https://github.com/apollostack/meteor-starter-kit , und ich habe eine Sammlung "Posts" erstellt und ich kann Daten in die Benutzeroberfläche ziehen. Aber wenn ich die Sammlung von der Mongo-Konsole aktualisiere, wird die Benutzeroberfläche nicht automatisch aktualisiert ... Fehle ich etwas Konfiguration? Kann mir hier jemand helfen? HierMeteor Apollo nicht aktualisieren UI, wenn wir Sammlung von Mongo-Konsole aktualisieren

ist der Code:

Schema und Resolvern:

import {Random} from 'meteor/random'; 

const Posts = new Mongo.Collection('posts'); 
export const typeDefs = [` 

    type Post { 
    _id: String 
    title: String 
    } 


    type Query { 
    myPosts: [Post] 
    } 

    schema{ 
    query: Query 
    } 

`]; 

export const resolvers = { 
    Query: { 
     myPosts(root, args) { 
      return Posts.find().fetch(); 
     } 

    }, 
    Post: { 
     title: ({title}) => title 
    } 
}; 

App Komponente:

import React, {Component} from 'react'; 
import {graphql} from 'react-apollo'; 
import {Meteor} from 'meteor/meteor'; 
import {createContainer} from 'meteor/react-meteor-data'; 
import gql from 'graphql-tag'; 

const App = ({userId, loading, error, myPosts, refetch}) => { 
    return (
     <div>{userId} 
      <button onClick={() => refetch()}>Refetch!</button> 
      {myPosts && myPosts.map((post, index) => { 
       return (
        <div key={index}>{post.title}</div> 
       ); 
      })} 
     </div> 
    ); 

}; 

App.propType = { 
    userId: React.PropTypes.string.isRequired, 
    posts: React.PropTypes.Object, 
    refetch: React.PropTypes.func 
}; 

const GET_USER_DATA = gql ` 
    { 
    myPosts{ 
     title 
    } 
    } 
`; 

const withData = graphql(GET_USER_DATA, { 
    props: ({data}) => { 
     console.log(data); 
     const {loading, error, myPosts, variables, refetch} = data; 

     if (loading) 
      return {loading}; 
     if (error) 
      return {error}; 
     return {myPosts, refetch}; 

    }, 
    options: (ownProps) => ({ 
     variables: { 
      id: "myownvariable" 
     } 
    }) 
}); 

const AppWithData = withData(App); 

const AppWithUserId = createContainer(() => { 
    return {userId: "sampleuserid"}; 
}, AppWithData); 

export default AppWithUserId; 

Client/main.js

import {Meteor} from 'meteor/meteor'; 
import {render} from 'react-dom'; 
import React from 'react'; 

import ApolloClient from 'apollo-client'; 
import {meteorClientConfig} from 'meteor/apollo'; 
import {ApolloProvider} from 'react-apollo'; 

import App from '/imports/ui/App'; 

const client = new ApolloClient(meteorClientConfig()); 

Meteor.startup(() => { 
    render(
     <ApolloProvider client={client}> 
     <App/> 
    </ApolloProvider>, document.getElementById('app')); 
}); 

Server/main. js

import {createApolloServer} from 'meteor/apollo'; 
import {makeExecutableSchema, addMockFunctionsToSchema} from 'graphql-tools'; 

import {typeDefs, resolvers} from '/imports/api/schema'; 

const schema = makeExecutableSchema({typeDefs, resolvers}); 

createApolloServer({schema}); 

Antwort

1

Apollo, anders als Meteor pubsub, sendet standardmäßig keine Updates an den Client. Sie können es auf eine dieser Methoden verwenden:

http://dev.apollodata.com/react/receiving-updates.html

+0

Vielen Dank für Ihre Antwort. Der Link http://dev.apollodata.com/react/receiving-updates.html hat mir geholfen, mein Problem zu lösen. –

+0

in meinem Fall funktionierte die Umfrage gut, aber ich konnte nicht herausfinden, wie man Abonnements verwendet. Gibt es Arbeitsbeispiele mit meteor apollo? Hilfe wird sehr geschätzt! –

+0

Ich habe es nicht getan, aber Sie sollten alles, was Sie brauchen, mit Argumenten für diese Funktionen konfigurieren: http://dev.apollodata.com/core/meteor.html#API – Loren

Verwandte Themen