Custom proxy handler

[jacob-orbiit]

I may be creating an X-Y problem for myself, but the scenario I'm looking for is "use data if it exists, otherwise fetch it" (with a manual override, like refresh()). This works well for fields with known names like user:

let gettingMe;

const state = proxy({ /* … */ });

const store = derive({
  async user(get) {
    const { user } = get(state);

    if (user.isAuthenticated) return user;

    gettingUser ??= getUser();

    await gettingUser;

    return user;
  },
});

However, it's quite common to have collections keyed by ids. If I were setting up the Proxy myself for that, I would do something like:

let gettingProduct;

new Proxy(new Map<ProductUUID, Product>(), {
  async get(products, prop) {
    if (products.has(prop)) return products.get(prop);

    if (!gettingProduct.has(prop)) getProduct(prop);

    await gettingProduct;

    return products.get(prop);
  },
});

I read through the docs and README, but didn't find anything that seemed adequate for facilitating this; my apologies if this already exists.

[dai-shi]

Let's see if you really need proxies for this case.

This works capability-wise, right?

const state = proxy({ user: null })

const getUserFromState = async () => {
  if (!state.user) {
    state.user = await getUser()
  }
  return state.user
}

[dai-shi]

I think it's easier to have your proxy outside the valtio proxy.

new Proxy(proxy(...), { get() { ... } })

I'd also suggest to avoid proxyMap in this case which is just an emulation around normal object/array.

[jacob-orbiit]

Hmm, that is giving me very bizarre results: prop is always a symbol (I'm guessing it's from an interator?) and Reflect.get(target, prop, receiver) appears to be returning internals of valtio (specifically, proxyState).

export const state = proxy({
  errors: new Array(0),
  user: {
    id: '',
    isAuthenticated: false,
    // …
  },
});
export const store = new Proxy(state, {
  get(target, prop, receiver) {
    const result = Reflect.get(target, prop, receiver);

    // [
    //   { errors: Proxy, user: Proxy },
    //   Proxy { errors: Proxy, user: Proxy },
    //   20,
    //   (target, receiver, version2, handlePromise = defaultHandlePromise) => {…},
    //   4,
    //   Set(0) { size: 0 },
    // ]

    return result;
  },
  set(target, prop, value) {
    const result = Reflect.set(target, prop, value);

    return result;
  },
});

Whatever that bizarre-looking output is, valtio seems to expect it as user from const { user } = useSnapshot(store) is the initial value in the above state. However, the traps above are never called with any useful values to catch (ex I would expect for prop to be 'user' at some point, as it was in the previous iteration with the new Proxy() inside valtio's proxy()).

Perhaps it would be better to make smaller states/stores? (I'm trying that out now)

export const errorsState = proxySet();
export const productsState = new Proxy(proxy(), {
  get() { },
  has() { },
  set() { },
});
export const userState = proxy();

P.S. Thanks for helping out with this! I know you said it's explicitly out of scope for valtio, but if I can get this working, I think it would be valuable to document in the repo's wiki (I'd be happy to contribute that).

[jacob-orbiit]

So it seems these are all "six of one, half a dozen of the other", wherein the Proxy()'s get trap is only ever invoked at the top-level of getting the collection itself (not items on the collection).

[jacob-orbiit]

Ah, I think I've got it:

const promiseMethodNames = new Set(['catch', 'finally', 'then']);
const products = new Proxy(proxy({}), {
  get(collection, prop, receiver) {
    // Valtio `await`s the parent promise, and await continuously calls `then()`
    // until it reaches the end of the chain (wherein `then()` is undefined).
    if (promiseMethodNames.has(prop)) { return }

    const field = Reflect.get(collection, prop, receiver);
    if (typeof prop === 'symbol' || field) { return field }

    if (prop.length === 24) { return getProduct(prop) }
  },
  set(collection, id, value) {…},
});
export const state = proxy({
  errors,
  products: new Promise((resolve) => {
    if (Object.keys(products).length) return resolve(products);

    gettingProducts ??= getProducts();

    return resolve(gettingProducts.then(() => products));
  }),
  user: new Promise((resolve) => {
    if (user.isAuthenticated) return resolve(user);

    gettingUser ??= getUser();

    return resolve(gettingUser.then(() => user));
  }),
});

[dai-shi]

Hm, I didn't expect so complicated. Maybe because it uses promises.

[dai-shi]

#610 (comment)

Let's change it to non async, and store a promise.

const state = proxy({ user: null })

const getUserFromState = () => {
  if (!state.user) {
    state.user = getUser()
  }
  return state.user
}

If that ☝️ works, the proxy version would be something like this 👇 .

const state = new Proxy(proxy({ user: null }), {
  get(target, prop) {
    if (prop === 'user' && !target.user) {
      target.user = getUser()
    }
    return target[prop]
  },
})

[dai-shi]

Do you want to fetch product each on demand, or can you fetch all products at once?

[jacob-orbiit]

Fetch on demand

[dai-shi]

Something like this?

const getProducts = () => new Proxy(proxy({}), {
  get(target, prop) {
    if (!target[prop]) {
      target[prop] = getProduct(prop)
    }
    return target[prop]
  },
})

const state = new Proxy(proxy({ user: null, products: null }), {
  get(target, prop) {
    if (prop === 'user' && !target[prop]) {
      target[prop] = getUser()
    }
    if (prop === 'products' && !target[prop]) {
      target[prop] = getProducts()
    }
    return target[prop]
  },
})

[jacob-orbiit]

I think that's basically the same as what I posted above (#610 (reply in thread)), except this has an extra Proxy() wrapper (on state, which I think is not necessary?) and consolidates each top-level field into 1 big getter instead of each their own.

P.S. Sorry for the delay—I was travelling.

[dai-shi]

okay, so basically we reached the same line.