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

【问题标题】：Apollo client subscription works in playground but not in expo appApollo 客户端订阅适用于 Playground，但不适用于 Expo 应用程序
【发布时间】：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 ); } } }; 我相信问题出在前端，但我仍然找不到

标签： graphql expo subscription react-apollo apollo-client

【解决方案1】：

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

【讨论】：