1
我開始使用meteor apollo入門工具包https://github.com/apollostack/meteor-starter-kit ,並且我創建了一個集合「Posts」,我可以將數據拉入UI。但是當我從mongo控制檯更新集合時,它不會自動更新UI ...我是否缺少一些配置?有人能幫我一下嗎?當我們從Mongo主機更新集合時,流星Apollo沒有更新UI
下面是代碼:
架構和解析器:
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
}
};
應用組件:
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;
客戶端/ 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'));
});
服務器/主。 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});
感謝您的回答。鏈接http://dev.apollodata.com/react/receiving-updates.html幫助我解決了我的問題。 –
在我的情況下,輪詢工作正常,但我無法弄清楚如何使用訂閱。有沒有流星阿波羅的例子?非常感謝幫助! –
我還沒有做到這一點,但你應該能夠使用這些函數的參數來配置你需要的所有東西:http://dev.apollodata.com/core/meteor.html#API – Loren