Checkout UI Function access the Checkout UI Extension Custom Setting Field

[josepheus]

Hi Everyone,

I'm not sure if this question has been asked before but I'm having a hard time finding a proper resource/tutorial on how to do this. I have a single repo with both Extension UI and Function inside, I created a custom setting field under my Extension UI. I can retrieve it within Extension UI via useSettings() hook so no issue there, what I want to do is access that same setting within my Function (is this possible?). I understand that inside my Function I needed to Query the data I need (via the provided run.graphql file). Maybe someone can direct me to a proper way of achieving this. Thanks!

[josepheus · Accepted solution]

Found the solution here. Sharing this for anyone having the same concern. Here's my code summary if you're wondering.

Extension UI

useEffect(() => {
    const func = async() => {
      const result = await applyAttributeChange({
        type: "updateAttribute",
        key: "fooBar",
        value: `${valueFromSomewhere}`,
      });
      console.log('applyAttributeChange result', result);
    }
    func();
}, [applyAttributeChange, min]);

Function's run.graphql

query RunInput {
  cart {
    cost {
      totalAmount {
        amount
      }
    }
    attribute(key: "fooBar") {
      value
    }
  }
  paymentMethods {
    id
    name
  }
}