> ## Documentation Index
> Fetch the complete documentation index at: https://docs.prequel.co/llms.txt
> Use this file to discover all available pages before exploring further.

# Viewing destination transfers

> Render transfers for an existing destination for your users to inspect.

<Steps>
  <Step title="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](/export/sdks/react/tutorials/building-an-add-destination-connection-form) here to create one.

    ```tsx title="Create getTransfers" icon="react" expandable theme={null}
    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>

  <Step title="Using getTransfers">
    Use `getTransfers` created in Step 1 to fetch transfers for the given destination.

    ```tsx title="Fetch transfers" icon="react" expandable theme={null}
    // 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>

  <Step title="Rendering transfers">
    Render the `transfers` fetched from the Prequel API for inspection.

    ```tsx title="Transfers" icon="react" expandable theme={null}
    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>
          ))}
        </>
      );
    }
    ```
  </Step>
</Steps>