Apollo 客户端订阅适用于 Playground，但不适用于 Expo 应用程序

Posted 2023-03-10

【中文标题】Apollo 客户端订阅适用于 Playground，但不适用于 Expo 应用程序

【英文标题】：Apollo client subscription works in playground but not in expo app

【发布时间】：2019-11-18 11:54:59

【问题描述】：

订阅在操场上有效并返回预期的字段，但在 apollo graphql 客户端中无效，它不返回任何内容！这是在 Playground 和客户端中使用的查询：

export const PARTY_SUBSCRIPTION = gql`
  subscription onPartyUpdated($hostname: String!) 
    party(hostname: $hostname) 
      mutation
      node 
        id
        users 
          username
        
        open
        hostname
      
    
  
`;

这是我的 apollo 客户端配置文件：

const DEV_DB_ENDPOINT = "http://192.168.1.3:4000/";

const authLink = setContext(async (_,  headers ) => 
  const token = await AsyncStorage.getItem("userToken");
  return 
    headers: 
      ...headers,
      authorization: token ? `Bearer $token` : ""
    
  ;
);

const wsLink = new WebSocketLink(
  uri: "ws://localhost:5000/",
  options: 
    reconnect: true
  
);
const httpLink = new HttpLink(
  uri: DEV_DB_ENDPOINT,
  credentials: "same-origin"
);

const link = split(
  // split based on operation type
  ( query ) => 
    const definition = getMainDefinition(query);
    console.log(query);
    return (
      definition.kind === "OperationDefinition" &&
      definition.operation === "subscription"
    );
  ,
  wsLink,
  httpLink
);

const client = new ApolloClient(
  link: ApolloLink.from([
    onError(( graphQLErrors, networkError ) => 
      if (graphQLErrors)
        graphQLErrors.map(( message, locations, path ) =>
          console.log(
            `[GraphQL error]: Message: $message, Location: $locations, Path: $path`
          )
        );

      if (networkError) console.log(`[Network error]: $networkError`);
    ),
    authLink,
    link
  ]),
  cache: new InMemoryCache()
);

export  client ;

这是我的订阅组件

<Subscription
  subscription=PARTY_SUBSCRIPTION
  variables=
    hostname: "Amir004"
  
  onError=err => console.log(err)
  onCompleted=data => console.log(data)
>
  () => 
    return <Text>Current list of friends in your party : </Text>;
  
</Subscription>

组件不会控制台记录任何错误或数据！

非常感谢任何帮助:)

【问题讨论】：

localhost:5000 是正确的端点吗？大概它应该指向与您的HttpLink 相同的服务器，或者至少不应该是localhost，因为您在移动设备上运行。

@DanielRearden 我尝试将 websocket 链接设置为“192.168.1.3:4000”，但没有任何改变。

你真的是通过调用pubsub.publish来触发订阅服务器端的吗？

我正在使用 prisma，代码在服务器端运行良好，这是我的订阅解析器：const Subscription = party: subscribe: (parent, hostname , prisma , info) => console.log(hostname); return prisma.subscription.party( where: node: hostname , info ); ; 我相信问题出在前端，但我仍然找不到

【参考方案1】：

对于仍在为这个问题苦苦挣扎的人来说，使用 Query 组件并调用 subscribeToMore 似乎可行！我仍然不知道源问题是什么，目前我只能使用查询组件订阅！ 有关 subscribeToMore 的更多信息：https://www.apollographql.com/docs/react/advanced/subscriptions/#subscribetomore