use msw/graphql and use typed respomse

Signed-off-by: Andrew Johnson <ajohnson@gocardless.com>

plugins/github-deployments/src/api/index.ts

@@ -45,7 +45,7 @@ export type Options = {
 };
 
 const deploymentsQuery = `
-query lastDeployments($owner: String!, $repo: String!, $last: Int) {
+query deployments($owner: String!, $repo: String!, $last: Int) {
   repository(owner: $owner, name: $repo) {
     deployments(last: $last) {
       nodes {
@@ -62,6 +62,14 @@ query lastDeployments($owner: String!, $repo: String!, $last: Int) {
 }
 `;
 
+export type QueryResponse = {
+  repository?: {
+    deployments?: {
+      nodes?: GithubDeployment[];
+    };
+  };
+};
+
 export class GithubDeploymentsApiClient implements GithubDeploymentsApi {
   private readonly configApi: ConfigApi;
   private readonly githubAuthApi: OAuthApi;
@@ -93,7 +101,10 @@ export class GithubDeploymentsApiClient implements GithubDeploymentsApi {
       },
     });
 
-    const response: any = await graphQLWithAuth(deploymentsQuery, options);
+    const response: QueryResponse = await graphQLWithAuth(
+      deploymentsQuery,
+      options,
+    );
     return response.repository?.deployments?.nodes?.reverse() || [];
   }
 }

plugins/github-deployments/src/components/GithubDeploymentsCard.test.tsx

@@ -25,7 +25,6 @@ import {
 } from '@backstage/core';
 
 import { render } from '@testing-library/react';
-import { rest } from 'msw';
 import { setupServer } from 'msw/node';
 import { GithubDeploymentsApiClient, githubDeploymentsApiRef } from '../api';
 import { githubDeploymentsPlugin } from '../plugin';
@@ -33,6 +32,7 @@ import { GithubDeploymentsCard } from './GithubDeploymentsCard';
 
 import { entityStub, noDataResponseStub, responseStub } from '../mocks/mocks';
 import { wrapInTestApp } from '@backstage/test-utils';
+import { graphql } from 'msw';
 
 jest.mock('@backstage/plugin-catalog-react', () => ({
   useEntity: () => {
@@ -74,7 +74,11 @@ describe('github-deployments', () => {
 
   describe('GithubDeploymentsCard', () => {
     it('should display fetched data', async () => {
-      worker.use(rest.post('*', (_, res, ctx) => res(ctx.json(responseStub))));
+      worker.use(
+        graphql.query('deployments', (_, res, ctx) =>
+          res(ctx.data(responseStub)),
+        ),
+      );
 
       const rendered = render(
         wrapInTestApp(
@@ -101,7 +105,9 @@ describe('github-deployments', () => {
 
     it('should display empty state when no data', async () => {
       worker.use(
-        rest.post('*', (_, res, ctx) => res(ctx.json(noDataResponseStub))),
+        graphql.query('deployments', (_, res, ctx) =>
+          res(ctx.data(noDataResponseStub)),
+        ),
       );
 
       const rendered = render(

plugins/github-deployments/src/mocks/mocks.ts

@@ -1,3 +1,5 @@
+import { QueryResponse } from '../api';
+
 /*
  * Copyright 2021 Spotify AB
  *
@@ -35,35 +37,31 @@ export const entityStub = {
   },
 };
 
-export const responseStub = {
-  data: {
-    repository: {
-      deployments: {
-        nodes: [
-          {
-            state: 'active',
-            environment: 'prd',
-            updatedAt: '2021-03-25T12:08:45Z',
-            commit: {
-              commitUrl: 'https://exampleapi.com/123456789',
-              abbreviatedOid: '12345',
-            },
+export const responseStub: QueryResponse = {
+  repository: {
+    deployments: {
+      nodes: [
+        {
+          state: 'active',
+          environment: 'prd',
+          updatedAt: '2021-03-25T12:08:45Z',
+          commit: {
+            commitUrl: 'https://exampleapi.com/123456789',
+            abbreviatedOid: '12345',
           },
-          {
-            state: 'pending',
-            environment: 'lab',
-            updatedAt: '2021-03-25T12:08:47Z',
-            commit: {
-              commitUrl: 'https://exampleapi.com/543212345',
-              abbreviatedOid: '54321',
-            },
+        },
+        {
+          state: 'pending',
+          environment: 'lab',
+          updatedAt: '2021-03-25T12:08:47Z',
+          commit: {
+            commitUrl: 'https://exampleapi.com/543212345',
+            abbreviatedOid: '54321',
           },
-        ],
-      },
+        },
+      ],
     },
   },
 };
 
-export const noDataResponseStub = {
-  data: {},
-};
+export const noDataResponseStub: QueryResponse = {};