1

meteor apollo スターター キットhttps://github.com/apollostack/meteor-starter-kit の使用を開始し、コレクション「Posts」を作成して、データを UI に取り込むことができました。しかし、mongo コンソールからコレクションを更新すると、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'));
});

サーバー/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});
4

1 に答える 1

1

Meteor pubsub とは異なり、Apollo はデフォルトではクライアントに更新を送信しません。次のいずれかの方法を使用して設定できます。

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

于 2016-11-13T04:27:00.823 に答える