Order Client Loading States

[martijnvdbrug]

Description

This PR aims to implement global loading and error states for the active order store and the current user store.
Vue example:

<template>
  <div>
    <h1 v-if="loading">Loading...</h1>
    <h1 v-if="error">Something went wrong!</h1>
    <h1 v-if="data">Active order: {{ data.code }}</h1>
  </div>
</template>
<script setup lang="ts">
  import { VendureOrderClient } from "vendure-order-client";
  import { useStore } from "@nanostores/vue";

  const client = new VendureOrderClient(
    "http://localhost:3050/shop-api",
    "your-channel-token"
  );

  const { data, loading, error } = useStore(client.$activeOrder);
  await client.getActiveOrder();
</script>

⚠️ Still TODO:

• For queries and mutations that handle activeOrders (like addItemToOrder, applyCouponCode, etc), you can use the decorator @HandleLoadingState('$activeOrder') to handle loading and error states for $activeorder
• For queries and mutations that handle currentUser (like login), you can use @HandleLoadingState('$currentUser') so that it handles loading and error states for $currentUser
• For each function/mutation:
  • Add the decorator @HandleLoadingState('$currentUser') or @HandleLoadingState('$activeOrder')
  • Use setResult(this.$activeOrder, activeOrder); or setResult(this.$currentUser, currentUser); to store the result (or ErrorResult) in the store.
  • Checkout getActiveOrder() as example, that should already be correctly implemented (untested)
  • And last, do this.throwIfErrorResult(activeOrder as ActiveOrder<A>); to return either an ActiveOrder or throw if an ErrorResult was returned.
• All validateCurrentUser and validateOrder can be replaced with throwIfErrorResult
• Testing: @nanostores/vue needs to be installed, so that we can test if loading and result states are correctly set. I guess we can use const { data, loading, error } = useStore(orderClient.$activeOrder); in our tests.
  • Testing the error handling once, for example in by adding a non-existent item to order is good enough, no need to test error state for each function, because it might be hard to mock errors in some cases (like for getActiveOrder())
  • Each test should test for the correct loading and data result though

⚠️ All of this is untested, so please let me know if you run into issues or if things aren't clear.

Breaking changes

• Consumers can now destructure the store to get data, loading and error states:

import { useStore } from '@nanostores/vue'

- const activeOrder = useStore(orderClient.activeOrder);
+ const { data, loading, error } = useStore(orderClient.$activeOrder);

Checklist

📌 Always:

• I have set a clear title
• My PR is small and contains only a single feature. (Split into multiple PR's if needed)
• I have reviewed my own PR, fixed all typo's and removed unused/commented code

⚡ Most of the time:

• I have added or updated test cases for important functionality
• I have updated the README if needed

📦 For publishable packages:

• Have you correctly increased the version number in package.json to the next patch/minor/major?
• Have you added your changes to the changelog? See this example

[martijnvdbrug]

Nice work @dalyathan, thanks

[martijnvdbrug]

These else statements could be simplified into:

Suggested change

	} else {
	if (wasSetToTrue) {
	wasFinallySetToFalse = true;
	}
	}
	} else if (wasSetToTrue) {
	wasFinallySetToFalse = true;
	}

BUT, another option would be to not use listenKeys at all:

      expect(client.$activeOrder.value?.loading).toBe(false);
      const promise = client.removeOrderLine('T_1');
      expect(client.$activeOrder.value?.loading).toBe(true);
      await promise;
      expect(client.$activeOrder.value?.loading).toBe(false);

It does require a bit of work to refactor, but I do find the code a bit more followable. I leave it up to you, both approaches are ok, but if you choose the listenKeys options we need to simplify the if/else statement like above.

I do like the custom expect messages, I was actually looking for something like this the other day, didnt know this worked 👐

[dalyathan]

Which is an even better approach. Updating PR now

[martijnvdbrug]

Some changes required!

[martijnvdbrug]

@dalyathan Nice, good idea with the helper function, nice and readable now!