DocumentationAPI Reference

Viewing Destination Transfers

This guide demonstrates rendering transfers for an existing destination for your users to inspect.

Suggest Edits

Step 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. Leverage one of the fetchToken functions you wrote in Building an "Add Destination" Connection Form here to create one.

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
);

Step 2: Using getTransfers

Use getTransfers created in Step 1 to fetch transfers for the given destination.

// 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]);

Step 3: Rendering transfers

Render the transfers fetched from the Prequel API for inspection.

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>
      ))}		
    </>
  );
}

Updated about 2 months ago

What’s Next

To learn how add support for users to edit existing destinations, see the next tutorial.