Issue with useRefract

[internet-individual]

Hello,

I keep getting this error when I update material-ui from version 3.9.3 to 4.0.0.

TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.
    at Object.exports.subscribeTo (modules.js?hash=65a4cf04ccdfebef31e41c84519adbc1f5ea5676:74727)
    at Object.from (modules.js?hash=65a4cf04ccdfebef31e41c84519adbc1f5ea5676:76131)
    at data (modules.js?hash=65a4cf04ccdfebef31e41c84519adbc1f5ea5676:73708)
    at createComponent (modules.js?hash=65a4cf04ccdfebef31e41c84519adbc1f5ea5676:73709)
    at configureHook (modules.js?hash=65a4cf04ccdfebef31e41c84519adbc1f5ea5676:73954)
    at modules.js?hash=65a4cf04ccdfebef31e41c84519adbc1f5ea5676:73986
    at mountMemo (modules.js?hash=65a4cf04ccdfebef31e41c84519adbc1f5ea5676:58670)
    at Object.useMemo (modules.js?hash=65a4cf04ccdfebef31e41c84519adbc1f5ea5676:58879)
    at Object.useMemo (modules.js?hash=65a4cf04ccdfebef31e41c84519adbc1f5ea5676:2641)
    at useRefract (modules.js?hash=65a4cf04ccdfebef31e41c84519adbc1f5ea5676:73985)

[thisRaptori]

Hey @jwentwistle thanks for reporting this!

Could you provide some more information? Ideally a code example - that way we can better understand what's going wrong. A live codesandbox or something similar would be ideal!

[internet-individual]

Okay, here's an issue from material, but they told me that it's not an issue with material. There's a code example in there.
mui/material-ui#15812 (comment)

When looking at the code, an object with a symbol is passed into the subscribeTo function, but after the update, it's undefined. I don't know if it has to do with the polyfill of the symbol, but there are people that have made issues about that and I can't fix it.

[thisRaptori]

Hmm I can't figure out what your code is trying to do.

  const subscribeDiscussions = new Observable(subscriber => {
    queryDiscussions.subscribe(
      value => subscriber.next(value),
      error => subscriber.error(error),
      () => subscriber.complete()
    );
    return () => {
      subscription.unsubscribe();
    };
  });

  const observeUpdateDiscussions = ({ observe }, data) => {
    return observe().pipe(take(1));
  };

  const handleUpdateDiscussions = initial => effect => {
    effect.subscribe(query => {
      if (mount && query.data) {
        // detemines if update exists
        let filterSub = userDiscussion.filter(object => {
          return object._id == query.data.updateDiscussions._id;
        });

        // adds update if it doesn't exist
        if (
          query.data.updateDiscussions.type == "add" &&
          filterSub.length == 0
        ) {
          setUserDiscussion(userDiscuss => {
            let update = [...userDiscuss, query.data.updateDiscussions];
            client.writeQuery({
              query: USERDISCUSSIONS,
              data: { userDiscussions: update }
            });
            return update;
          });
        }

        // deletes update if it does exist
        if (query.data.updateDiscussions.type == "delete") {
          setUserDiscussion(userDiscuss => {
            let filterSubs = userDiscuss.filter(object => {
              return object._id !== query.data.updateDiscussions._id;
            });
            client.writeQuery({
              query: USERDISCUSSIONS,
              data: { userDiscussions: filterSubs }
            });
            return filterSubs;
          });
        }
      }
    });
  };

  useRefract(observeUpdateDiscussions, subscribeDiscussions, {
    handler: handleUpdateDiscussions
  });

From what I can tell:

• subscribeDiscussions is an observable which wraps the queryDiscussions object.
• observeUpdateDiscussions is an aperture which just passes through the first value and completes.
• handleUpdateDiscussions is a handler which subscribes to the subscribeDiscussions observable.
• the useRefract call combines the above.

If that's the case, this is all set up just to wrap queryDiscussions.subscribe in observables? Is there a reason you don't want to just subscribe directly in a useEffect without adding the extra layers of indirection?

For example, this is much clearer to me:

useEffect(() => {
  queryDiscussions.subscribe(query => {
    if (mount && query.data) {
      // detemines if update exists
      let filterSub = userDiscussion.filter(object => {
        return object._id == query.data.updateDiscussions._id
      })

      // adds update if it doesn't exist
      if (
        query.data.updateDiscussions.type == 'add' &&
        filterSub.length == 0
      ) {
        setUserDiscussion(userDiscuss => {
          let update = [...userDiscuss, query.data.updateDiscussions]
          client.writeQuery({
            query: USERDISCUSSIONS,
            data: { userDiscussions: update },
          })
          return update
        })
      }

      // deletes update if it does exist
      if (query.data.updateDiscussions.type == 'delete') {
        setUserDiscussion(userDiscuss => {
          let filterSubs = userDiscuss.filter(object => {
            return object._id !== query.data.updateDiscussions._id
          })
          client.writeQuery({
            query: USERDISCUSSIONS,
            data: { userDiscussions: filterSubs },
          })
          return filterSubs
        })
      }
    }
  })
}, [])

Not saying that this is definitely a problem outside Refract, just trying to wrap my head around the problem and not getting it at this point!

[internet-individual]

Thank you! That does fix it. I thought that refract was making react reactive. Although that issue with refract didn't happen until updating material.

[thisRaptori]

No problem! Yeah it makes react reactive - but specifically the props themselves (or data passed in to the hook); when you're combining it with other libraries (e.g. redux, apollo, etc) they're a separate thing which can be combined with refract, but it's not always necessary. 😄

Although that issue with refract didn't happen until updating material.

Interesting, I'll have to take a look at what their changelog was to see if there's anything which stands out!

[thisRaptori]

I'm gonna close this for now, since I've not been able to reproduce.

If it comes up again please comment again or create a new issue!