Skip to main content
1

Creating a getTransfers function

In your frontend, call the useGetTransfers hook to generate a function that fetches a scoped auth token and uses it to get transfers for the destination scoped by the token. Use one of the fetchToken functions you wrote in Building an “Add Destination” connection form here to create one.
Create getTransfers
const getTransfers = useGetTransfers(
  fetchToken,         // fetchToken implementation, takes an ExistingDestination
  "app.example.co",   // the origin of your React app (used to allow CORS),
  PREQUEL_HOST        // Optional (default api.prequel.co): the host url of your Prequel API
);
2

Using getTransfers

Use getTransfers created in Step 1 to fetch transfers for the given destination.
Fetch transfers
// Local state to store transfers
const [transfers, setTransfers] = useState<Transfer[]>();

// Async function fetches transfers from Prequel API
const fetchTransfers = async (existing: ExistingDestination) => {
  const transfers = await getTransfers(existing);
  setTransfers(transfers);
};

useEffect(() => {
  fetchTransfers(destination);  // Fetch the transfers for selected destination
}, [destination]);
3

Rendering transfers

Render the transfers fetched from the Prequel API for inspection.
Transfers
const Transfers = () => {
  // Transfers fetching elided

  return (
    <>
      {transfers.map((t) => (
        <div key={d.id}>
          <p>{t.id}</p>
          <p>{t.status}</p>
          <p>{t.log}</p>
          // ...other transfer fields
        </div>
      ))}
    </>
  );
}