Relay: RelayObservable: Unhandled Error TypeError: Cannot read property 'subscribe' of undefined in React and Relay

[hasmukhzwt]

I have followed the subscription tutorial on How to GraphQL React + Relay (https://relay.dev/docs/en/subscriptions) but still not working.

I'm using Relay Modern in my app and have successfully integrated query but not working the requestSubscription function.

Any help would be awesome.

My environment.js file:

function setupSubscription(
    config,
    variables,
    cacheConfig,
    observer,
) {
    const query = config.text
    const subscriptionClient = new SubscriptionClient('ws://192.168.1.19:8000/subscriptions', {reconnect: true});
    const id = subscriptionClient.on({query, variables}, (error, result) => {
    console.log(result,'result');
    observer.onNext({data: result})
    })
}
const network = Network.create(fetchQuery, setupSubscription)

const environment = new Environment({
    network,
    store
});

export default environment;

My Subscription.js file:

const subscription = graphql`
    subscription newVoteSubscription {
    leaderboardUpdate {
        id,
        game_id,
        event_id,
        colarr,
        rowarr
    }
    }
`;
function newVoteSubscription(callback) {
    const variables = {};
    return requestSubscription(environment, {
    subscription: subscription,
    variables: variables,
    onError: (error)=> {
        console.log(error, "error");
    },
    onNext: (res) => {
        console.log(res,'onNext');
        // callback();
    },
    updater: proxyStore => {
        console.log(proxyStore,'proxyStore');
    },
    onCompleted: () => {
        console.log('test');
    },
    });
}

export default newVoteSubscription;

[renanmav]

Did u checked this? https://github.com/facebook/relay/issues/2869#issuecomment-534905537

[hasmukhzwt]

@renanmav

Yes I have checked, but its return error RelayObservable.from is undefined.

[renanmav]

Could you describe which packages and versions are you using?

[hasmukhzwt]

@renanmav

I'm using react-relay - 7.1.0 and relay-runtime - 7.1.0.

I got the response but now observer.onNext is undefined.

My code:

const setupSubscription = (config, variables, cacheConfig, observer) => {
  const query = config.text

  const subscriptionClient = new SubscriptionClient('ws://192.168.1.19:8000/subscriptions', {reconnect: true})
  subscriptionClient.request({ query, variables }).subscribe((result) => {
    observer.onNext({data: result})
  });

  return Observable.create(() => {    
    return subscriptionClient;
  });
}

const environment = new Environment({
  network: Network.create(fetchQuery, setupSubscription),
  store: new Store(new RecordSource())
});

[hasmukhzwt]

Finally working in my project. Here is my projects files:

environment.js

const setupSubscription = (config, variables, cacheConfig, observer) => {
    const query = config.text
    const subscriptionClient = new SubscriptionClient(GRAPHQL_SUBSCRIPTION_ENDPOINT, { reconnect: true })
    return Observable.create(sink => {
        const c = subscriptionClient.request({ query, variables }).subscribe(sink);
        return c;
    });
}

Subscription.js

function manageSquaresSubscription(variables, updater, onNext, onError) {
  return requestSubscription(environment, {
    subscription: subscription,
    variables: variables,
    updater,
    onError,
    onNext
  });
}

Component.js

manageSquaresSubscription(
    { event_id: this.state.record.id },
    proxyStore => {
        console.log(proxyStore);
    },
    response => {
        console.log(response)
    },
    error => console.log(`An error occured:`, error),
);