中继订阅不适用于 react-native

Posted 2023-03-08

【中文标题】中继订阅不适用于 react-native

【英文标题】：Relay subscriptions not working with react-native

【发布时间】：2018-03-31 18:49:33

【问题描述】：

我正在使用带有 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。

提前谢谢各位 ....

【参考方案1】：

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

【讨论】：

你返回的是 subscriptionClient.request( query, variables ) 还是 subscriptionClient.request( query, variables ).subscribe( .....);

const setupSubscriptions = (config, variables, cacheConfig, observer) => const query = config.text; const subscriptionClient = new SubscriptionClient(ws://192.168.10.3:8080/subscriptions, reconnect:true); return subscriptionClient.request(query, variables, (err, result) => observer.onNext(data:result) )

我认为 .subscribe 现在已被删除。你只需要返回 subscriptionClient.request

让它工作。它是 subscriptionClient.request(..).subscribe(..)

您使用的是哪个版本的订阅传输？

【参考方案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