Problem loading the TransactionTable

[zenrsr]

Any help would be greatly appreciated 🙏

I'm currently at 5:32:39 in the youtube tutorial video, if it helps

Problem loading the TransactionTable in root page.tsx and in /tramsaction-history Route

The above picture shows the console looged account as undefined, which uses the 'getAccount' imported from the bank.transactions.ts

this is the getAccount i used:

export const getAccount = async ({ appwriteItemId }: getAccountProps) => {
  try {
    // get bank from db
    const bank = await getBank({ documentId: appwriteItemId });

    // get account info from plaid
    const accountsResponse = await plaidClient.accountsGet({
      access_token: bank.accessToken
    });
    const accountData = accountsResponse.data.accounts[0];

    // get transfer transactions from appwrite
    const transferTransactionsData = await getTransactionsByBankId({
      bankId: bank.$id
    });

    const transferTransactions = transferTransactionsData.documents.map(
      (transferData: Transaction) => ({
        id: transferData.$id,
        name: transferData.name!,
        amount: transferData.amount!,
        date: transferData.$createdAt,
        paymentChannel: transferData.channel,
        category: transferData.category,
        type: transferData.senderBankId === bank.$id ? "debit" : "credit"
      })
    );

    // get institution info from plaid
    const institution = await getInstitution({
      institutionId: accountsResponse.data.item.institution_id!
    });

    const transactions = await getTransactions({
      accessToken: bank?.accessToken
    });

    const account = {
      id: accountData.account_id,
      availableBalance: accountData.balances.available!,
      currentBalance: accountData.balances.current!,
      institutionId: institution.institution_id,
      name: accountData.name,
      officialName: accountData.official_name,
      mask: accountData.mask!,
      type: accountData.type as string,
      subtype: accountData.subtype! as string,
      appwriteItemId: bank.$id
    };

    // sort transactions by date such that the most recent transaction is first
    const allTransactions = [...transactions, ...transferTransactions].sort(
      (a, b) => new Date(b.date).getTime() - new Date(a.date).getTime()
    );

    return parseStringify({
      data: account,
      transactions: allTransactions
    });
  } catch (error) {
    console.error("An error occurred while getting the account:", error);
  }
};

And after some debuggin the error seems that the cause of the error is this function getTransactionsByBankId which is failed to send the senderBankId it seems

the following error is also logged in my console btw:

AppwriteException [Error]: Invalid query: Attribute not found in schema: senderBankId
    at Client.call (webpack-internal:///(rsc)/./node_modules/node-appwrite/lib/client.js:206:15)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Databases.listDocuments (webpack-internal:///(rsc)/./node_modules/node-appwrite/lib/services/databases.js:1658:16)
    at async $$ACTION_1 (webpack-internal:///(rsc)/./lib/actions/transaction.actions.ts:40:36)
    at async $$ACTION_1 (webpack-internal:///(rsc)/./lib/actions/bank.actions.ts:89:42)
    at async TransactionHistory (webpack-internal:///(rsc)/./app/(root)/transaction-history/page.tsx:43:21) {
  code: 400,
  type: 'general_query_invalid',
  response: {
    message: 'Invalid query: Attribute not found in schema: senderBankId',
    code: 400,
    type: 'general_query_invalid',
    version: '0.13.16'
  }
}
An error occurred while getting the account: TypeError: Cannot read properties of undefined (reading 'documents')
    at $$ACTION_1 (webpack-internal:///(rsc)/./lib/actions/bank.actions.ts:92:63)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async TransactionHistory (webpack-internal:///(rsc)/./app/(root)/transaction-history/page.tsx:43:21)
account: undefined
 ⨯ components\TransactionsTable.tsx (48:25) @ map
 ⨯ TypeError: Cannot read properties of undefined (reading 'map')
    at TransactionsTable (./components/TransactionsTable.tsx:103:44)
    at stringify (<anonymous>)
digest: "1903807520"
  46 |         </TableHeader>
  47 |         <TableBody>
> 48 |           {transactions.map((t: Transaction) => {
     |                         ^
  49 |             const status = getTransactionStatus(new Date(t.date));
  50 |             const amount = formatAmount(t.amount);
  51 |

[alsyferr]

I encountered a similar issue. After inspecting the Appwrite transactions attributes, I noticed they are empty. I don’t recall Adrian mentioning that we need to create them. This might be the reason why no data is coming from there.”

Please respond if you find a solution

[zenrsr]

yeah, that's what i thought i was thinking of creating a attribute in the transactions collection with that might temporarily fix the solution ( i recommend checking the whole project workflow in the figma file )

will let you know if find something

[alsyferr]

I encountered a similar issue. After inspecting the Appwrite transactions attributes, I noticed they are empty. I don’t recall Adrian mentioning that we need to create them. This might be the reason why no data is coming from there.”

Please respond if you find a solution

This worked for me. go through the types folder "index.d.ts" file and look for the transactions schema and update it in the appwrite transaction attributes. Signout and SignIn again and you are good to go. Remember to uncheck the transactions code in the bank.actions.ts file.

[zenrsr]

Thank you for the solution mate.