# Use the JavaScript Client to Build a Macro Data Service Boundary

Canonical: https://fxmacrodata.com/articles/fxmacrodata-javascript-workflow-guide
Author: Robert Tidball
Published: 2026-10-20T13:23:22Z

Request macro observations with @fxmacrodata/client and keep subscription credentials outside browser bundles.

**Quick answer:**Request macro observations with @fxmacrodata/client and keep subscription credentials outside browser bundles.

A web application needs more than a request that works in a console. It needs a clear place for the subscription credential, a bounded data request and a response that the interface can handle when the dataset is empty.

The FXMacroData JavaScript / TypeScript client provides Promise-based methods for application code. This guide uses a policy-rate request to define a small server-side data boundary, while keeping browser presentation separate from authenticated access.

**Who this is for:**Teams using JavaScript / TypeScript who want a repeatable macro-data workflow with explicit inputs and understandable failure states.

## Prerequisites

Node.js 18 or newer, an application project and @fxmacrodata/client. A protected request needs an FXMacroData subscription key in the server environment. This example is application integration code; the SDK guide provides the installation and endpoint reference.

**The working sequence**
- **Server credential**

- **Typed request**

- **App response**

## 1. Install the client in the application project

The public package is @fxmacrodata/client. Add it using the package-management process approved for your project, and record the version in the lockfile. The[SDK page](/documentation/sdks) lists its published distribution route.

Keep FXMACRODATA_API_KEY in a server environment or secret store. Do not give it a framework-specific public environment-variable prefix or place it in code imported by a browser component. A compiled bundle can expose a value even when the source variable looked private.

## 2. Make one explicit request

Use the client from server-side code:

```
import { FXMacroDataClient } from "@fxmacrodata/client";

const client = new FXMacroDataClient({
  apiKey: process.env.FXMACRODATA_API_KEY,
});
const result = await client.announcements("aud", "policy_rate");
console.dir(result, { depth: 2 });
```

The request identifies the[Australian policy-rate series](/aud/policy_rate#api-docs) . Inspect the response model in development, then return only the fields the application needs. Keep errors and unavailable observations distinct from a numeric zero.

## 3. Define the application response

Map the selected observation to an application object with currency, indicator, reference period, value and unit. Include the source or series link where supplied. This makes the interface independent of presentation guesses about what the number represents.

Handle an empty response explicitly. A card can display Data unavailable while retaining the series label; it should not reuse the previous request's number under a newly selected currency. Validate user-selected currency and indicator identifiers before creating a request.

## 4. Control refresh and sharing

Choose a request cadence that matches the report's purpose and subscription allowance. A macro dashboard rarely needs every viewer to repeat the same server request on every UI interaction. Use an application cache and refresh policy consistent with the data licence and the required freshness.

The package also exposes MCP URL and header helpers for MCP hosts. Those helpers configure a different connection surface; they do not turn this REST-backed application into an agent. For an AI assistant, start with the[MCP connection guide](/documentation/mcp-server) .

## Workflow checks

Part Purpose Server environment Stores the subscription credential Client method Makes the identified data request Application mapping Selects fields and handles unavailable data Browser component Displays the approved application response

**Before relying on the workflow:**Check the browser bundle and network requests for credential exposure, test an unavailable response and confirm that changing the selected series clears stale presentation state.

## Design the card around the reader’s question

Imagine a pair-research page with an Australian policy-rate card. The reader needs to know which rate is displayed, the period it describes and when the application refreshed it. A bare percentage may look precise while leaving all three questions unanswered. Keep the explanatory label and source link attached when mapping the client response into the view.

Changing the selected currency is a revealing test. If the new request is unavailable, the previous country’s number must not remain under the new heading. Clear or explicitly date the prior result and preserve the identity of the series that produced it. This is a presentation decision with analytical consequences: the reader may compare two cards even when their reference periods differ.

For a recurring research product, measure whether the card remains interpretable after an error, a series change and a refresh. Include the observation’s context when generating a downloadable note or handing data to a chart. Once that small view object is dependable, the same client can support a broader report without spreading credential handling or series-selection assumptions through the interface.

## Continue from the working example

Continue with the linked setup guide for supported installation and request options. Keep the selected series and its response context together as the workflow expands.

## Sources and related guides

- [FXMacroData JavaScript package](https://www.npmjs.com/package/@fxmacrodata/client)

- [FXMacroData JavaScript / TypeScript setup](/documentation/sdks)

- [Integration directory](/documentation/integrations)

AI was used for research, creating images and editing.

Source: FXMacroData