How to use the wonka.subscribe function in wonka

return new Promise((resolve, reject) => {
    try {
      pipe(
        client.executeQuery(createRequest(query, variables)),
        subscribe(({ data, error }) => {
          if (error) {
            reject(error);
          } else {
            resolve(data);
          }
        })
      );
      // eslint-disable-next-line no-empty
    } catch (err) {}
  });
}

executeQuery = (opts?: Partial) => {
    this.unsubscribe();

    this.setState({ fetching: true });

    const [teardown] = pipe(
      this.props.client.executeQuery(this.request, {
        requestPolicy: this.props.requestPolicy,
        ...opts,
      }),
      subscribe(({ data, error }) => {
        this.setState({
          fetching: false,
          data,
          error,
        });
      })
    );

    this.unsubscribe = teardown;
  };

return new Promise((resolve, reject) => {
    pipe(
      source,
      subscribe(({ data, error }) => {
        if (error) {
          reject(error);
        } else {
          resolve(data);
        }
      }),
    );
  });
}

return new Promise((resolve, reject) => {
    pipe(
      source,
      subscribe(({ data, error }) => {
        if (error) {
          reject(error);
        } else {
          resolve(data);
        }
      }),
    );
  });
}

const [
      subscriptionProp$,
      nextSubscriptionProp,
    ] = makeSubject();
    this.nextQueryProp = nextQueryProp;
    this.nextSubscriptionProp = nextSubscriptionProp;

    const queryResults$ = makeQueryResults$(props.client, queryProp$);
    const subscriptionResults$ = makeSubscriptionResults$(
      props.client,
      subscriptionProp$
    );

    const [queryTeardown] = pipe(
      queryResults$,
      subscribe(this.onQueryUpdate)
    );
    const [subscriptionTeardown] = pipe(
      queryResults$,
      subscribe(this.onSubscriptionUpdate)
    );

    this.unsubscribe = () => {
      queryTeardown();
      subscriptionTeardown();
    };
  }

executeSubscription = () => {
    this.setState({ fetching: true });

    const [teardown] = pipe(
      this.props.client.executeSubscription(this.request),
      subscribe(({ data, error }) => {
        const { handler } = this.props;

        this.setState({
          fetching: false,
          data: handler !== undefined ? handler(this.state.data, data) : data,
          error,
        });
      })
    );

    this.unsubscribe = teardown;
  };

this.nextQueryProp = nextQueryProp;
    this.nextSubscriptionProp = nextSubscriptionProp;

    const queryResults$ = makeQueryResults$(props.client, queryProp$);
    const subscriptionResults$ = makeSubscriptionResults$(
      props.client,
      subscriptionProp$
    );

    const [queryTeardown] = pipe(
      queryResults$,
      subscribe(this.onQueryUpdate)
    );
    const [subscriptionTeardown] = pipe(
      queryResults$,
      subscribe(this.onSubscriptionUpdate)
    );

    this.unsubscribe = () => {
      queryTeardown();
      subscriptionTeardown();
    };
  }

const runTransition = React.useMemo(() => {
    const [transitionSource, runTransition] = makeSubject();
    pipe(
      transitionSource,
      subscribe(transition => transition.start())
    );
    return runTransition;
  }, []);
  return (

export function gqlSubscription(
  client: Client,
  q: string,
  subscriber: GqlSubscriber,
  options: GqlSubscriptionOptions = {},
) {
  const { variables, headers = {} } = options;
  const request = createRequest(q, variables);
  const response = client.executeSubscription(request, { fetchOptions: { headers } });
  const [teardown] = pipe(
    response,
    subscribe(({ data, error }) => {
      subscriber(data, error);
    }),
  );
  return teardown;
}

useEffect(() => {
    setResult(prev => ({ ...prev, fetching: true }));

    const request = createRequest(query, variables);

    const [teardown] = pipe(
      urqlClient.executeQuery(request),
      subscribe(({ data, error }) => {
        setResult({ fetching: false, data, error });
      })
    );

    return teardown;
  }, []);