中继订阅不适用于 react-native

Question

我正在使用带有 react native 和 Relay 的 Express Graphql 服务器。我的设备确实连接到订阅，但它没有订阅它。这是我在服务器上的 index.js

const subscriptionServer = SubscriptionServer.create(
  {
    execute,
    subscribe,
    schema,
    onOperation: (message, params, webSocket) => {
      console.log(params)
      return params;
    },
    onConnect: () => {
      // My device does connects
      console.log("client connected")
    }
  },
  {
    server,
    path: '/subscriptions'
  },
);

app.use('/graphql', graphqlHTTP({
  schema,
  graphiql: true
}));

app.use('/graphiql', graphiqlExpress({
  endpointURL: '/graphql',
  subscriptionsEndpoint: `ws://127.0.0.1:8080/subscriptions`
}));

server.listen(PORT, ()=> {
  console.log("Groceries running on port " + PORT)
  console.log(
    `subscriptions is now running on ws://localhost:${PORT}/subscriptions'}`
  );
});

服务端订阅的解析器，由于每个人都在使用来自 apolloGraphql 的可执行模式，所以很难弄清楚。

export default {
  type: OrderEdges,
  args: {
     ShopId: {type: GraphQLID},
  },
  subscribe: withFilter(() => pubsub.asyncIterator('orderConfirmed'), (payload, variables) => {
    console.log(payload)
    console.log(variables)
    return payload.orderConfirmed.node.ShopId == variables.ShopId;
  }),
}

现在是 react-native 客户端。我的中继环境订阅设置。

const setupSubscriptions = (config, variables, cacheConfig, observer) => {
  const query = config.text; //does console logs the query
  const subscriptionClient = new SubscriptionClient(`ws://192.168.0.100:8080/subscriptions`, {reconnect:true});
  subscriptionClient.request({query, variables}, (err, result) => {
    console.log(err) // doesn't get call inside the request method
    observer.onNext(data:result)
  })
}

我的订阅方式，

export default function() {
  const variables = {
    ShopId: shop.getShop()[0].id
  } 
  requestSubscription(
  environment,
  {
    subscription,
    variables,
    onCompleted: (res, err) => {
      console.log(res)
      console.log(err)
    },
    updater: (store) => {...},
    onError: error => console.error(error),
    onNext: (response) => {console.log(response)}
  });

}

我调用订阅的组件，

import subscription from '../../GraphQLQueries/subscriptions/orderConfirmed';

class OrdersBox extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    //initializing subscription
    orderSubscriptions();
  }

当设备启动应用程序时，我的设备连接到 Web 套接字，因为我可以在 SubscriptionServer 的 onConnect 方法中看到 console.log 语句。但是当负载在突变后发布时，订阅方法不会被调用。我似乎无法弄清楚我做错了什么。也许这是我缺少的一些 react-native 特定配置，因为当我在 graphiql 上测试它时，一切似乎都运行良好。 我找不到与 express graphql 一起使用的 react-native 和中继订阅的任何示例。

注意：当我将订阅与 graphiql 一起使用时，一切正常。但不适用于 react-native 和 relay。

提前谢谢各位 ....

Answer 1

我没有返回 subscriptionClient.request 方法。添加return语句解决了这个问题。在 subscriptions-transport-ws@0.8.3 中使用 subscribe 方法时不必返回。但是 0.9.1 版本将 subscribe 函数替换为 request 确实需要它返回。

Answer 2

尝试：

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

  const subscriptionClient = new SubscriptionClient(websocketURL, {
    reconnect: true
  });

  const client = subscriptionClient.request({ query, variables }).subscribe({
    next: result => {
      observer.onNext({ data: result.data });
    },
    complete: () => {
      observer.onCompleted();
    },
    error: error => {
      observer.onError(error);
    }
  });

  return {
    dispose: client.unsubscribe
  };
}

订阅-传输-ws@0.9.1