Попытка использовать подписку в React-Native с graphql - PullRequest
Новая
       57

Попытка использовать подписку в React-Native с graphql

1 голос
/ 28 сентября 2019

Я использую React Native и graphql с apollo.Я пытаюсь использовать подписку в своем приложении, и я не знаю, почему она не работает.

Код ниже - мои настройки клиента apollo. 

const cache = new InMemoryCache();

const getToken = async () => {
  const token = await AsyncStorage.getItem("jwt");

  if (token) {
    return token;
  } else {
    return null;
  }
};

const httpLink = new HttpLink({
  uri: "http://serverUrl/graphql"
});

const wsLink = new WebSocketLink({
  uri: "ws://serverUrl/subscriptions",
  options: {
    reconnect: true,
    connectionParams: {
      "X-JWT": getToken()
    }
  }
});

const authLink = setContext(async (_, { headers }) => {
  const token = await AsyncStorage.getItem("jwt");

  return {
    headers: {
      ...headers,
      "X-JWT": token || null
    }
  };
});

const combinedLinks = split(
  ({ query }) => {
    const { kind, operation } = getMainDefinition(query);
    console.log(wsLink, httpLink);
    return kind === "OperationDefinition" && operation === "subscription";
  },
  wsLink,
  httpLink
);

const client = new ApolloClient({
  cache: cache,
  link: ApolloLink.from([concat(authLink, combinedLinks), createUploadLink()])
});

export default client;

И код нижемой код для подписки на экран чата.

  updateQuery = (previousData, { subscriptionData }) => {
    const { navigation } = this.props;
    console.log(previousData, subscriptionData);

    if (!subscriptionData.data) {
      return previousData;
    }

    console.log(previousData, subscriptionData);

    const { data } = subscriptionData;
    const {
      questUpdate: { status }
    } = data;

    return Object.assign({}, previousData, {
      getQuest: {
        ...previousData.getQuest,
        quest: {
          ...previousData.getQuest.quest,
          status
        }
      }
    });
  };

  render() {
    return (
      <Query query={GET_QUEST} variables={{ questId, skip: false }}>
        {({ data, loading, subscribeToMore }) => {
          if (loading) {
            return null;
          }
          const subscribeOptions = {
            document: QUEST_EVENT_SUBSCRIPTION,
            updateQuery: this.updateQuery
          };
          subscribeToMore(subscribeOptions);
        }}
      </Query>
    )
  }

Он хорошо работает на игровой площадке, но не работает, когда я хочу использовать его в React Native.Я думаю, что он должен console.log () или обновить состояния по крайней мере.Скажите, пожалуйста, как я могу решить эту проблему.

...