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

# Loading loans

> Understand when to use Loan Application vs Borrower Dashboard Elements

To load a loan into Pylon Elements, you need to determine which Element to use based on the loan's status.

## Determining which Element to use

Check the loan's `submitted` property:

* **If `submitted: false`** → Use the [Loan Application Element](/elements/loan-application/introduction)
* **If `submitted: true`** → Use the [Borrower Dashboard Element](/elements/borrower-dashboard/introduction)

## Retrieving loans

Retrieve all loans for a user using the `borrowerUser` GraphQL query:

```graphql theme={null}
query GetBorrowerLoans($userId: ID!) {
  borrowerUser(userId: $userId) {
    loans {
      id
      submitted
      # ... other loan fields
    }
  }
}
```

<Warning>
  The `user_id` used in the Auth Handshake must match the `user_id` on the loan, or the Element will not load.
</Warning>

## Example implementation

```tsx theme={null}
const fetchLoans = async () => {
  const response = await fetch("pylon/loan-applications?user_id=user_24601");
  const loans = await response.json();
  return loans.filter((loan) => loan.archive_date === null);
};

const loans = await fetchLoans();

const openLoan = (loan) => {
  if (loan.submitted) {
    // Open Borrower Dashboard Element
    return (
      <BorrowerDashboardComponent
        authLeaseCallback={fetchPylonAuthLease}
        loanId={loan.id}
      />
    );
  } else {
    // Open Loan Application Element
    return (
      <LoanApplicationComponent
        authLeaseCallback={fetchPylonAuthLease}
        loanId={loan.id}
      />
    );
  }
};

// To start a new loan application, omit the loanId
<LoanApplicationComponent
  authLeaseCallback={fetchPylonAuthLease}
/>
```

## Starting a new loan

To start a new loan application, load the Loan Application Element without a `loanId`:

```tsx theme={null}
<LoanApplicationComponent
  authLeaseCallback={fetchPylonAuthLease}
  // loanId is undefined for new applications
/>
```

## Pre-filling data with the GraphQL API

You can use the GraphQL API to pre-fill borrower information before initializing Elements. This is useful when you already have borrower data from your system or want to create a more streamlined experience.

### How it works

1. **Create a loan via API** - Use the GraphQL API to create a loan and add borrower information (personal details, income, assets, property information, etc.)
2. **Initialize the Element** - Pass the `loanId` to the Element
3. **Data is pre-filled** - The Element automatically displays all the data you added via the API, pre-filled on behalf of the borrower

### Example: Pre-filling a loan application

```tsx theme={null}
// Step 1: Create loan and add borrower data via GraphQL API
const createLoanWithData = async () => {
  const mutation = `
    mutation CreateLoan($input: CreateLoanInput!) {
      createLoan(input: $input) {
        id
      }
    }
  `;

  const variables = {
    input: {
      dealId: "deal_123",
      borrowers: [{
        personalInformation: {
          firstName: "John",
          lastName: "Doe",
          email: "john.doe@example.com",
          phoneNumber: "555-1234"
        }
      }],
      property: {
        address: {
          street: "123 Main St",
          city: "San Francisco",
          state: "CA",
          zipCode: "94105"
        }
      }
    }
  };

  const response = await fetch("https://pylon.mortgage/graphql", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      Authorization: `Bearer ${accessToken}`,
    },
    body: JSON.stringify({ query: mutation, variables }),
  });

  const { data } = await response.json();
  return data.createLoan.id;
};

// Step 2: Initialize Element with the loanId
const loanId = await createLoanWithData();

<LoanApplicationComponent
  authLeaseCallback={fetchPylonAuthLease}
  loanId={loanId}
/>
```

When the Element initializes, all the borrower information, property details, and any other data you added via the API will be pre-filled, allowing borrowers to review and complete the remaining fields rather than starting from scratch.

<Info>
  You can continue to add or update data via the GraphQL API even after the Element is initialized. The Element will reflect the latest data from the API automatically.
</Info>

## Next steps

* [Loan Application Element](/elements/loan-application/introduction) - For new applications
* [Borrower Dashboard Element](/elements/borrower-dashboard/introduction) - For submitted applications
* [Complete integration guide](/guides/getting-started/e2e-build) - Learn how to use the GraphQL API to create loans and manage borrower data