andruschka / react-meteor-hooks Goto Github PK

client

error information

How can I solve this problem? Any help would be greatly appreciated

Example

const { isLoading, call, onDone, onError } = useMethod('add_book')

onDone(result =>{
   // data...
})

Just to give you a heads up on what others are saying about this libs use of Tracker and the like: https://forums.meteor.com/t/react-hooks-state-and-lifecycle-methods-without-a-class-react-16-7-0-alpha/46341/55?u=aadams

From the link:
“it uses hooks for subscriptions instead of doing a Meteor.subscribe inside a Tracker hooks”
I’m not sure those are such a great idea, actually, and I intentionally left them out of the initial PR :slight_smile:
For example, a subscription made with react-meteor-hooks’s useSubscription() will always rerender your component whenever the ready() status of the subscription changes, even if you don’t actually need or use the value.
Some other, more specialized helpers, like useCurrentUser or useMongoDoc, could be useful helpers, less sure about useSubscription.

More importantly though, some implementations in react-meteor-hooks seems flawed to me :

its useTracker() will behave incorrectly if passed a reactiveFn that does a subscription (the subs made on first render will never be unsubscribed)
its useSubscription() uses local variables in a way that seems broken (for which useRef or useCallback would typically be used) - did not fully check so maybe that’s FUD, but the current code doesn’t look like it would behave correctly.

For ui test purposes, convenient if we could simulate meteor methods/tracker and others, without meteor.

For example it can work with contexts.

What do you think if I make a typescript typing for your package and make hooks work even without a meteor (from adapter in context api)? All in 2 PR.

Hi. I have seen such example:

const UserBooks = (sortBy, showLimit) => {
  const loading = useSubscription('user_books', showLimit)
  if (loading) {
    // ...
  } else {
    const allBooks = useMongoFetch(Books.find({}, { sort: { [sortBy] : -1 }}), [sortBy])
    const books = allBooks.map(/* ... */)
    // ...
  }
}

the useMongoFetch is called conditionally, which is not correct with react hooks.

see: https://reactjs.org/docs/hooks-rules.html

When testing in IE11 I got a syntax error. When I moved the react-meteor-hooks into imports it worked.

I didn't have a lot of time to look into this deeply, but it seems Meteor's build system does some things that parcel does not.

Hi,

I'm trying to use the useSubscription hook in one of my functional components and get the following error:

Uncaught Invariant Violation: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
   See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.

When I use the useState hook in the same location, everything works fine, so 1. and 2. cannot be the reason for the error. After checking the React documentation I think that you should declare React in peerDependencies instead of dependencies, because otherwise your library uses its own instance of React.

Best regards,
Tobias

If i import it from npm meteor throws error
here import:
import { useSubscription, useTracker } from 'react-meteor-hooks'
here error:
Error: Cannot find module 'meteor/tracker'
If put this package in /imports/... then it works, but it need to be a dependency and not part of project code

Trying to implement 'react-meteor-hooks, but 'loading' variable is always true:

import React from 'react';
import { useSubscription, useMongoFetch } from 'react-meteor-hooks';
import { Comments } from '../../../../collections/comments';

export const GiveComments = (props) => {

     const loading = useSubscription('getComments');

    if (loading) {
         console.log('loading... ');
    } else {
        const allComments = useMongoFetch(Comments.find({}));
        console.log('loaded: ', allComments);
      }
    return (null);
};

Publishing:

  Meteor.publish('getComments', function() {
    return Comments.find({});
  });

These hooks looks amazing, but can't get it to work. Why 'loading' does not stop?

I've be using the following in my apps and it's working well:

import { useState } from 'react'
import { Meteor } from 'meteor/meteor'

export function useMethod(methodName, { transform } = {}) {
  const [isLoading, setIsLoading] = useState(false)
  const [data, setData] = useState(null)
  const [error, setError] = useState(null)

  const call = (...args) => {
    setIsLoading(true)
    return new Promise((resolve, reject) => {
      Meteor.call(methodName, ...args, (err, result) => {
        if (err) {
          setError(err)
          reject(err)
        } else {
          setData(transform ? transform(result) : result)
          resolve(result)
        }
        setIsLoading(false)
      })
    })
  }

  return { isLoading, data, error, call }
}

Example: https://codesandbox.io/s/kj9zqqyrr

I can create a PR if you think this would be useful.