Example Requests 💡

Queries

Get the contracts

After successfully connecting the bank account, we can fetch the contracts. First we have to describe the wanted result with the gql tag:

const contractsQuery = gql`
  query me($lang:String!) {
    me {
      contracts {
        contractid
        cid
        category
        mainCategory {
          id
          text(lang:$lang)
        }
        subCategory {
          id
          text(lang:$lang)
        }
        configured
        customMainCategory {
          id
          text(lang:$lang)
        }
        customSubCategory {
          id
          text(lang:$lang)
        }
        customContractPartner {
          name
        }
        amount
        interval
        runTime
        periodOfNotice
        cancelationAlert
        extensionPeriod
        contractPartner {
          creditorId
          name
        }
      }
    }
  }
`;

After that we fire the query to the server:

fetchContracts() {
  const { languageCode } = this.languageService.localSettings.defaultLocale;

  return this.graphQl
    .query(contractsQuery, {lang:languageCode})
    .saveToState(StateKeys.Contracts)
    .transform(res => {
      return res.data.me.contracts;
    })
    .modelize(Contract)
    .execute();
}

Since this query contains Translatable values, e.g. mainCategory we need to pass the language code to get the translated value of this field. For setting those we always return the id of this translatable. Note that since this returns an observable, just calling this method will do nothing. You will have to call .subscribe() on it to execute. We can use this query f.e. like:

this.contractService
  .fetchContracts()
  .subscribe(contracts => {
    // do whatever you like with contracts
    this.contracts = contracts;
  });

Bank Login Status

Since the bank login process can take some time, especially when the user has a lot of transactions, we provide an endpoint to add the bank account (described below) which responses with a so called bank login task token. This token can be used to request the status of the bank login process.

The request implementation looks like this:

const bankloginStatusQuery = gql`
  query bankLoginStatus($taskid: String!) {
    bankLoginStatus(taskToken: $taskid) {
      status
      message
    }
  }
`;

bankLoginStatus(taskid) {
  return this.graphQl
    .query(bankloginStatusQuery,  { taskid })
    .transform(resp => resp.data.bankLoginStatus)
    .withErrorMessage()
    .forceReload()
    .execute();
}

Because we want to get informationen about a specific login status, we send the variable token to the API, like we did with the language variable above.

Mutations

Add Bank Account

Adding a bank account returns a task token. This task token can be used to request the status via the bankLoginStatus query. To send multiple variables to the Yoli API we just use a Map of values.

const addBankAccountMutation = gql`
  mutation addBankAccount($bankCode: String!, $credentials: [String]!) {
    addBankAccount(bankCode: $bankCode, credentials: $credentials)
  }
`;

addBankLogin(credentials, bankCode) {
  return this.graphQl
    .mutate(addBankAccountMutation, {bankCode, credentials})
    .transform(resp => {
      // here we are going to save the task ids to the local storage
      // since we maybe have to wait till the user comes to some
      // point in the app to trigger the request
      const bankLogin = this.appState.bankLogin || {};
      const taskid = resp.data.addBankAccount;
      bankLogin.taskids = bankLogin.taskids || [];
      bankLogin.taskids.push(taskid);
      return bankLogin;
    })
    .saveToState(StateKeys.BankLogin)
    .forceReload()
    .withErrorMessage()
    .execute();
}