Energinet-DataHub / greenforce-frontend

GreenForce monorepo for the DataHub and Energy Origin frontends. Part of Energinet DataHub.
Apache License 2.0
66 stars 13 forks source link

feat(dh): apollo signal api #3303

Closed ManBearTM closed 3 weeks ago

ManBearTM commented 4 weeks ago

This PR aims to simplify how you fetch data from GraphQL by using signals while at the same time fix many of the quirks and inconsistencies of the Apollo API. To that end, I have created a new library for use within components. The API is intentionally very close to that of the Apollo hooks, since hooks and signals share many of the same characteristics. It looks like this:

import { Component, computed } from '@angular/core';
import {
  CreateCalculationDocument,
  GetCalculationByIdDocument,
} from '@energinet-datahub/dh/shared/domain/graphql';
import { mutation, query } from '@energinet-datahub/dh/shared/util-apollo';

@Component({
  selector: 'dh-zoneless',
  template: `
    @if (result.loading()) {
      <p>Loading...</p>
    } @else if (result.error()) {
      <p>Error</p>
    } @else {
      <p>State: {{ calculation()?.state }}</p>
    }

    <button (click)="result.refetch()">Refetch</button>
    <button (click)="create.mutate()">Create</button>
  `,
  standalone: true,
})
export class DhZonelessComponent {
  result = query(GetCalculationByIdDocument, {
    variables: {
      id: '43ab77c6-4404-4621-905e-fa0ab61a95a1',
    },
  });

  calculation = computed(() => this.result.data()?.calculationById);

  create = mutation(CreateCalculationDocument, {
    variables: {
      input: {
        // ...
      }
    }
  });
}
nx-cloud[bot] commented 4 weeks ago

☁️ Nx Cloud Report

CI is running/has finished running commands for commit c1c19b0fe12b26e3cee0a2c31a7cacf97d783bc0. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this CI Pipeline Execution


✅ Successfully ran 5 targets - [`nx affected:build --configuration=production --base=origin/main`](https://cloud.nx.app/runs/14GFENPSnL?utm_source=pull-request&utm_medium=comment) - [`nx affected:test --base=origin/main`](https://cloud.nx.app/runs/8VoRQisTim?utm_source=pull-request&utm_medium=comment) - [`nx affected -t component-test --base=origin/main`](https://cloud.nx.app/runs/HdEUPf7fdj?utm_source=pull-request&utm_medium=comment) - [`nx affected:lint --max-warnings=0 --fix --parallel --base=origin/main`](https://cloud.nx.app/runs/LadfwuKpxl?utm_source=pull-request&utm_medium=comment) - [`nx affected:e2e --configuration=ci --base=origin/main`](https://cloud.nx.app/runs/OAJJWLAuBq?utm_source=pull-request&utm_medium=comment)

Sent with 💌 from NxCloud.