How to use the @graffy/common.graft function in @graffy/common

async init() {
    // We need this line to be a separate function because the
    // constructor can't be async. We're okay even if pub is
    // called before this happens.
    const { options, query } = this;
    let data = await options.resolve(query);
    merge(data, this.earlyChange);

    // TODO: Properly resolve, getKnown etc. after early changes are merged.

    delete this.earlyChange;
    this.data = data = getKnown(data, query) || {};
    this.push(options.values ? graft(data, query) || {} : data);
  }

async init() {
    // We need this line to be a separate function because the
    // constructor can't be async. We're okay even if pub is
    // called before this happens.
    const { options, query } = this;
    let data = await options.resolve(query);
    merge(data, this.earlyChange);

    // TODO: Properly resolve, getKnown etc. after early changes are merged.

    delete this.earlyChange;
    this.data = data = getKnown(data, query) || {};
    this.push(options.values ? graft(data, query) || {} : data);
  }

// DO NOT getKnown the change to only those changes that overlap; when the
    // overlapping portion includes a deletion in a range, the change set
    // may contain additional items to make up.
    if (!getKnown(change, linkKnown(data, query))) return;

    merge(data, change);

    const nextQuery = getUnknown(data, query);

    if (nextQuery) {
      const linked = await options.resolve(nextQuery);
      merge(data, linked);
      if (!options.values) merge(change, linked);
    }
    data = getKnown(data, query);
    push(options.values ? graft(data, query) || {} : change);
  };

// DO NOT getKnown the change to only those changes that overlap; when the
      // overlapping portion includes a deletion in a range, the change set
      // may contain additional items to make up.
      if (!getKnown(change, linkKnown(data, query))) return;

      merge(data, change);

      const nextQuery = getUnknown(data, query);

      if (nextQuery) {
        const linked = await store.get(nextQuery, options);
        merge(data, linked);
        if (!options.values) merge(change, linked);
      }
      data = getKnown(data, query);
      push(options.values ? graft(data, query) || {} : change);
    };

// DO NOT getKnown the change to only those changes that overlap; when the
    // overlapping portion includes a deletion in a range, the change set
    // may contain additional items to make up.
    if (!getKnown(change, linkKnown(data, query))) return;

    merge(data, change);

    const nextQuery = getUnknown(data, query);

    if (nextQuery) {
      const linked = await options.resolve(nextQuery);
      merge(data, linked);
      if (!options.values) merge(change, linked);
    }
    this.data = getKnown(data, query);
    this.push(options.values ? graft(this.data, query) || {} : change);
  }
}

// DO NOT getKnown the change to only those changes that overlap; when the
    // overlapping portion includes a deletion in a range, the change set
    // may contain additional items to make up.
    if (!getKnown(change, linkKnown(data, query))) return;

    merge(data, change);

    const nextQuery = getUnknown(data, query);

    if (nextQuery) {
      const linked = await options.resolve(nextQuery);
      merge(data, linked);
      if (!options.values) merge(change, linked);
    }
    this.data = getKnown(data, query);
    this.push(options.values ? graft(this.data, query) || {} : change);
  }
}