Show the latest exchange rates for your product

In addition to stock and cryptocurrencies, Yuzu also has current and historical foreign exchange rates, in our flexible GraphQL API. In this recipe, we've mocked up a simple product listing with a currency selector, to convert prices into local currencies.

You know what is better than a screenshot? The live example site!

For this example, we picked Next.js, a React framework, to get started quickly. When the page loads, we grab live exchange rates for each of the supported currencies in the dropdown list. When a shopper changes the currency, the page converts the native prices in US Dollars to the target currency and re-renders.

Lets walk through each part:

1
2
3
4
5
6

query ForexEcommerceExampleRates($symbols: [String!]!) {
  forexTradingPairs(input: { symbols: $symbols }) {
    currentRate
    quoteCurrency { symbol }
  }
}

Here, we're passing a list of symbol pairs, like USD-EUR and USD-GBP, and for each one, retrieving the current exchange rate and the symbol of the quote currency (repeating EUR and GBP back so we can easily tell which rate is which.

The response will look something like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

{
  "data": {
    "forexTradingPairs": [
      {
        "currentRate": "0.95056",
        "quoteCurrency": {
          "symbol": "EUR"
        }
      },
      {
        "currentRate": "0.8157",
        "quoteCurrency": {
          "symbol": "GBP"
        }
      },
      {
        "currentRate": "134.838",
        "quoteCurrency": {
          "symbol": "JPY"
        }
      }
    ]
  }
}

Lastly, every time the currency is changed, we re-render with the converted prices.

1
2
3
4
5
6
7
8
9

const [currency, setCurrency] = useState("USD");
const forexPair = forexTradingPairs.find((fx) =>
  fx.quoteCurrency.symbol === currency
);

const localizedProducts = products.map((product) => {
  const price = !!forexPair ? product.usdPrice * forexPair.currentRate : product.usdPrice;
  return { ...product, price };
});