How to use @grafoo/bindings - 3 common examples

constructor(props: GrafooPreactConsumerProps, context: Context) {
    super(props, context);

    let bindings = createBindings(context.client, props, () => {
      this.setState(bindings.getState());
    });

    this.state = bindings.getState();

    this.componentDidMount = () => {
      if (props.skip || !props.query || this.state.loaded) return;

      this.state.load();
    };

    this.componentWillReceiveProps = next => {
      if ((!this.state.loaded && !next.skip) || props.variables !== next.variables)
        this.state.load(next.variables);
    };

constructor(props) {
    super(props);

    let bindings = createBindings(props.client, props, () => {
      this.setState(bindings.getState());
    });

    this.state = bindings.getState();

    this.componentDidMount = () => {
      if (props.skip || !props.query || this.state.loaded) return;

      bindings.load();
    };

    this.componentWillReceiveProps = next => {
      if ((!this.state.loaded && !next.skip) || props.variables !== next.variables) {
        bindings.load(next.variables);
      }
    };

export default function useGrafoo(config: GrafooConsumerProps) {
  config = config || {};
  let { skip, query, variables } = config;
  let client = useContext(ctx);
  let { current: bindings } = useRef(
    createBindings(client, config, () => {
      setState(bindings.getState());
    })
  );
  let [state, setState] = useState(bindings.getState());
  let { loaded } = state;

  useEffect(() => {
    if (skip || !query || loaded) return;

    bindings.load(variables);

    return () => {
      bindings.unbind();
    };
  }, [skip, query, variables, loaded]);