Почему Collection.find () не работает на моем клиенте Meteor? - PullRequest
Новая
       8

Почему Collection.find () не работает на моем клиенте Meteor?

0 голосов
/ 27 июня 2018

Я был уверен, что правильно создал свою коллекцию, опубликовал данные, подписался на правильную публикацию и проверил, действительно ли данные появлялись в оболочке Mongo. Я даже console.log () сделал данные, которые были опубликованы, чтобы убедиться, что публикация работала. Тем не менее, следующая строка кода ничего не возвращает:

const maybeMeet = Meets.find({meetId: maybeId}).fetch();

Это можно найти ниже и в строке 39 /client/imports/routes/routes.js в связанном репо.

В какой-то момент я даже попытался создать новый метод Meteor 'meets.query', который бы просто публиковал все необходимые мне данные (небезопасно), предотвращая необходимость в публикациях и подписках (теперь это закомментировано в строке 59 *) 1010 *). Это тоже не сработало. В целом, кажется, что клиент не может получить какие-либо данные с сервера, но переход от клиента к серверу, кажется, работает (я мог бы вставить вещи в свою коллекцию Meets).

Вот источник проблемы (часть routes.js): 

export const routes = (
    <div id='app'>
    <Header />
    <Router history={browserHistory}>
      <Switch>
        <Route exact path="/" render={() => {
          return <Landing />
        }} />
        <Route path="/before" render={() => {
          return <Before />
        }} />
        <Route path="/meet" render={() => {
          Meteor.subscribe('allMeets');

          const maybeId = queryString.parse(location.search).m;

          console.log(typeof maybeId);
          console.log(maybeId);

          const maybeMeet = Meets.find({meetId: maybeId}).fetch(); //***RETURNS NOTHING!***

          return maybeMeet.length ? <Created meet={maybeMeet[0]} /> : <NotFound />;
        }} />
        <Route path="*" render={() => {
          return <NotFound />
        }} />
      </Switch>
    </Router>
  </div>
);

Здесь я публикую данные (часть `meet.js '): 

if (Meteor.isServer) {
  Meteor.publish('allMeets', function() {
    return Meets.find();
  });
}

Пожалуйста, смотрите репозиторий для полного кода, если вам нужно увидеть больше: https://github.com/kpeluso/meetr

Я прошу прощения за грязный код - это новый проект.

Ответы [ 4 ]

0 голосов
/ 29 июня 2018

Оформить мой шаблон реакции на метеор.

https://github.com/pkcwong/meteor-react-starter

Я использую пакет meteor/react-meteor-data. HOF withTracker - правильное решение.

0 голосов
/ 28 июня 2018

В моем Created компоненте у меня был Tracker.autorun() с ошибкой, и это привело ко всему остальному. Вызов Meteor.subscribe(allMeets); в моем маршрутизаторе также, как уже упоминалось, является асинхронным и не обрабатывается как таковой.

Я нашел withTracker громоздким, но я черпал вдохновение в его документах. В результате отредактированный код в моем Created компоненте теперь включает следующее: 

componentDidMount() {
    this.meetTracker = Tracker.autorun(() => {
      const subHandle = Meteor.subscribe('allMeets');
      const loading = !subHandle.ready();

      const maybeMeet = Meets.find({meetId: this.props.meetId}).fetch();
      if (!maybeMeet.length && loading) {
        this.setState({active: <Loading />});
      } else if (!loading) {
        if (maybeMeet.length) {
          this.setState({active: <During meet={maybeMeet[0]} />});
        } else {
          createHistory().push('/PageNotFound');
          window.location.reload();
        }
      }
    });
  }

... и код в моем router теперь включает это: 

  <Route path="/meet" render={() => {
    const maybeId = queryString.parse(location.search).m;
    return <Created meetId={maybeId} />
  }} />
0 голосов
/ 28 июня 2018

WithTracker, проверка метеорологических документов https://guide.meteor.com/react.html#using-withTracker

Например, в этом коде для компонента APP withTracker синхронизирует реактивность с подпиской и списком вещей, извлекающим коллекцию. 

export default withTracker(() => {
  Meteor.subscribe('allThings')
  return {
    things: Things.find({}).fetch()
  }
})(App);
0 голосов
/ 28 июня 2018

Проблема здесь в том, что операция подписки является асинхронной, так как она должна извлекать данные с сервера.

Решение состоит в том, чтобы обернуть компонент, отображаемый маршрутизатором, в WithTracker, чтобы он перезапустился, когда будут доступны данные, и начал рендеринг в DOM

.

Дополнительная информация о том, как это сделать, находится в документации: https://guide.meteor.com/react.html#using-withTracker

...