将API调用的结果发布到Meteor中的集合

时间:2017-08-22 23:38:11

标签: javascript reactjs meteor collections

我试图创建一个简单的RSS提要阅读器,允许用户在搜索栏中输入网址并使用Meteor和React显示结果。在我目前的设置中,我有一个SearchBar组件,其中包含一个调用服务器上的meteor方法的函数。如何在客户端集合中存储API调用的返回值?我已经看过一些关于使用发布和订阅的例子,但是还没有能够效仿。我的目标是将这些数据保存在客户端集合中,以便我可以从任何需要它的组件访问它,而不必通过SearchBar组件的render方法呈现后续组件。这就是我目前设置的方式:

feeds.js

import { Meteor } from 'meteor/meteor';
import { HTTP } from 'meteor/http';
import parser from 'rss-parser';

if(Meteor.isServer) {
    Meteor.methods({
        getFeed(url) {
            this.unblock();
            const feed = {
                title: '',
                entries: []
            };
            try {
                console.log('trying to get url');
                const response = HTTP.get(url);
                parser.parseString(response.content, function(err, parsed) {
                  feed.title = parsed.feed.title;
                  parsed.feed.entries.forEach(function(entry) {
                    feed.entries.push(entry);
                  })
                });
                console.log(feed.title);
                return feed;
            } catch(e) {
                return false;
            }
        }
    });
}

SearchBar.js

import React, { Component } from 'react';
import { Tracker } from 'meteor/tracker';

import FeedList from './FeedList';

export default class SearchBar extends Component {
    constructor(props) {
        super(props);
        this.state = {
            results: null,
            url: ''
        }
    }

    onSubmit(e) {
        const { url } = this.state;

        e.preventDefault();

        const response = Meteor.call('getFeed', url, (err, res) => {
            if(!err) {
                this.setState({
                    results:res.entries
                });
                console.log(this.state.results);
            } else {
                console.log(err.reason);
            }
        });
    }

    onChange(e) {
        this.setState({
            url: e.target.value
        });
    }

    render() {
        return (
            <div>
                <form onSubmit={this.onSubmit.bind(this)}>
                    <input type="text" placeholder="Enter a URL" value={this.state.url} onChange={this.onChange.bind(this)}/>
                    <button type="submit">Get Feed</button>
                </form>
                {this.state.results ? <FeedList feedItems={this.state.results}/> : <p>Load a feed</p>}
            </div>
            );
    }
}

1 个答案:

答案 0 :(得分:-1)

根本不要在服务器上获取Feed。在客户端上获取它,并使用定义如下的本地集合保存它:

let localCollection = new Mongo.Collection(null)

关于评论:

  

典型的模式是让cron作业填充发布到客户端并在那里呈现的集合。

这将根据您的需求进行过度设计,并且通常被视为规范错误的答案。