Add defer directive to the operations stats page

package.json

@@ -51,13 +51,13 @@
     "@changesets/changelog-github": "0.4.8",
     "@changesets/cli": "2.26.1",
     "@graphql-codegen/add": "4.0.1",
-    "@graphql-codegen/cli": "3.3.1",
-    "@graphql-codegen/client-preset": "3.0.1",
-    "@graphql-codegen/graphql-modules-preset": "3.1.3",
-    "@graphql-codegen/typed-document-node": "4.0.1",
-    "@graphql-codegen/typescript": "3.0.4",
-    "@graphql-codegen/typescript-operations": "3.0.4",
-    "@graphql-codegen/typescript-resolvers": "3.2.1",
+    "@graphql-codegen/cli": "3.3.1-alpha-20230420202418-82620d460",
+    "@graphql-codegen/client-preset": "3.0.1-alpha-20230420202418-82620d460",
+    "@graphql-codegen/graphql-modules-preset": "3.1.3-alpha-20230420202418-82620d460",
+    "@graphql-codegen/typed-document-node": "4.0.1-alpha-20230420202418-82620d460",
+    "@graphql-codegen/typescript": "3.0.4-alpha-20230420202418-82620d460",
+    "@graphql-codegen/typescript-operations": "3.1.0-alpha-20230420202418-82620d460",
+    "@graphql-codegen/typescript-resolvers": "3.2.1-alpha-20230420202418-82620d460",
     "@graphql-inspector/cli": "3.4.16",
     "@manypkg/get-packages": "2.1.0",
     "@next/eslint-plugin-next": "13.3.0",

packages/services/api/src/modules/shared/module.graphql.ts

@@ -1,6 +1,8 @@
 import { gql } from 'graphql-modules';
 
 export default gql`
+  directive @defer on FRAGMENT_SPREAD | INLINE_FRAGMENT
+
   scalar DateTime
   scalar JSON
   scalar SafeInt

packages/services/server/package.json

@@ -19,6 +19,7 @@
     "@escape.tech/graphql-armor-max-depth": "1.8.4",
     "@escape.tech/graphql-armor-max-directives": "1.6.5",
     "@escape.tech/graphql-armor-max-tokens": "1.3.2",
+    "@graphql-yoga/plugin-defer-stream": "1.9.1",
     "@sentry/integrations": "7.49.0",
     "@sentry/node": "7.49.0",
     "@trpc/server": "10.21.1",

packages/services/server/src/graphql-handler.ts

@@ -12,6 +12,7 @@ import { useGenericAuth } from '@envelop/generic-auth';
 import { useGraphQLModules } from '@envelop/graphql-modules';
 import { useSentry } from '@envelop/sentry';
 import { useHive } from '@graphql-hive/client';
+import { useDeferStream } from '@graphql-yoga/plugin-defer-stream';
 import { Registry, RegistryContext } from '@hive/api';
 import { HiveError } from '@hive/api';
 import { cleanRequestId } from '@hive/service-common';
@@ -93,6 +94,7 @@ export const graphqlHandler = (options: GraphQLHandlerOptions): RouteHandlerMeth
   const server = createYoga<Context>({
     logging: options.logger,
     plugins: [
+      useDeferStream(),
       useArmor(),
       useSentry({
         startTransaction: false,
@@ -259,14 +261,13 @@ export const graphqlHandler = (options: GraphQLHandlerOptions): RouteHandlerMeth
 
         const accept = req.headers.accept;
 
-        if (!accept || accept === '*/*') {
+        if (!accept || accept === '*/*' || !reply.hasHeader('content-type')) {
           void reply.header('content-type', 'application/json');
         }
 
         void reply.status(response.status);
 
-        const textResponse = await response.text();
-        return reply.send(textResponse);
+        void reply.send(response.body || '');
       },
     );
   };

packages/web/app/package.json

@@ -42,7 +42,7 @@
     "@theguild/editor": "1.2.5",
     "@trpc/client": "10.21.1",
     "@trpc/server": "10.21.1",
-    "@urql/core": "3.1.1",
+    "@urql/core": "4.0.6",
     "@urql/devtools": "2.0.3",
     "@urql/exchange-graphcache": "5.0.9",
     "@whatwg-node/fetch": "0.8.6",
@@ -79,7 +79,7 @@
     "supertokens-node": "13.5.0",
     "supertokens-web-js": "0.5.0",
     "tslib": "2.5.0",
-    "urql": "3.0.3",
+    "urql": "4.0.0",
     "use-debounce": "9.0.4",
     "valtio": "1.10.4",
     "wonka": "6.3.1",

packages/web/app/pages/[orgId]/index.tsx

@@ -165,7 +165,6 @@ function ProjectsPage(): ReactElement {
                   />
                 ) : (
                   <div className="grid grid-cols-2 gap-5 items-stretch">
-                    {/** TODO: use defer here :) */}
                     {projects === null
                       ? [1, 2].map(key => (
                           <Card key={key}>

packages/web/app/pages/api/proxy.ts

@@ -3,6 +3,7 @@ import hyperid from 'hyperid';
 import { env } from '@/env/backend';
 import { extractAccessTokenFromRequest } from '@/lib/api/extract-access-token-from-request';
 import { captureException, getCurrentHub, wrapApiHandlerWithSentry } from '@sentry/nextjs';
+import { fetch } from '@whatwg-node/fetch';
 
 const reqIdGenerate = hyperid({ fixedLength: true });
 async function graphql(req: NextApiRequest, res: NextApiResponse) {
@@ -29,7 +30,23 @@ async function graphql(req: NextApiRequest, res: NextApiResponse) {
       },
       method: 'GET',
     } as any);
-    return res.send(await response.text());
+
+    res.writeHead(response.status, Object.fromEntries(response.headers.entries()));
+
+    if (response.body) {
+      const reader = response.body.getReader();
+      let streamDone = false;
+      while (!streamDone) {
+        const { done, value } = await reader.read();
+        if (done) {
+          streamDone = true;
+        } else {
+          res.write(Buffer.from(value));
+        }
+      }
+    }
+
+    return res.end();
   }
 
   const scope = getCurrentHub().getScope();
@@ -77,7 +94,7 @@ async function graphql(req: NextApiRequest, res: NextApiResponse) {
       headers: {
         Authorization: `Bearer ${accessToken}`,
         'content-type': req.headers['content-type'],
-        accept: req.headers['accept'],
+        accept: req.headers['accept'] + ', multipart/mixed',
         'accept-encoding': req.headers['accept-encoding'],
         'x-request-id': requestId,
         'X-API-Token': req.headers['x-api-token'] ?? '',
@@ -88,16 +105,32 @@ async function graphql(req: NextApiRequest, res: NextApiResponse) {
       body: JSON.stringify(req.body || {}),
     } as any);
 
+    graphqlSpan?.setHttpStatus(200);
+    graphqlSpan?.finish();
+
+    const resHeaders = Object.fromEntries(response.headers.entries());
+
     const xRequestId = response.headers.get('x-request-id');
     if (xRequestId) {
-      res.setHeader('x-request-id', xRequestId);
+      resHeaders['x-request-id'] = xRequestId;
     }
-    const parsedData = await response.json();
 
-    graphqlSpan?.setHttpStatus(200);
-    graphqlSpan?.finish();
+    res.writeHead(response.status, Object.fromEntries(response.headers.entries()));
+
+    if (response.body) {
+      const reader = response.body.getReader();
+      let streamDone = false;
+      while (!streamDone) {
+        const { done, value } = await reader.read();
+        if (done) {
+          streamDone = true;
+        } else {
+          res.write(Buffer.from(value));
+        }
+      }
+    }
 
-    res.status(200).json(parsedData);
+    return res.end();
   } catch (error) {
     console.error(error);
     captureException(error);
@@ -121,9 +154,6 @@ export default wrapApiHandlerWithSentry(graphql, 'api/proxy');
 
 export const config = {
   api: {
-    bodyParser: {
-      sizeLimit: '6mb',
-    },
     externalResolver: true,
   },
 };

packages/web/app/src/components/target/operations/Stats.tsx

@@ -340,10 +340,11 @@ function OverTimeStats({
 }
 
 function ClientsStats({
-  clients = [],
+  data,
 }: {
-  clients?: GeneralOperationsStatsQuery['operationsStats']['clients']['nodes'];
+  data: GeneralOperationsStatsQuery['operationsStats']['clients'] | null;
 }): ReactElement {
+  const clients = data?.nodes;
   const styles = useChartStyles();
   const sortedClients = useMemo(() => {
     return clients?.length ? clients.slice().sort((a, b) => b.count - a.count) : [];
@@ -755,7 +756,7 @@ export function OperationsStats({
     });
   }, [refetchQuery]);
 
-  const isFetching = query.fetching;
+  const isFetching = query.fetching || query.stale;
   const isError = !!query.error;
 
   const operationsStats = query.data?.operationsStats;
@@ -781,7 +782,7 @@ export function OperationsStats({
         </div>
       </OperationsFallback>
       <div>
-        <ClientsStats clients={operationsStats?.clients?.nodes} />
+        <ClientsStats data={operationsStats?.clients ?? null} />
       </div>
       <div>
         <OperationsFallback isError={isError} refetch={refetch} isFetching={isFetching}>

packages/web/app/src/graphql/query.general-operations-stats.graphql

@@ -11,7 +11,7 @@ query generalOperationsStats($selector: OperationsStatsSelectorInput!, $resoluti
         p99
       }
     }
-    ... on OperationsStats {
+    ... on OperationsStats @defer {
       failuresOverTime(resolution: $resolution) {
         date
         value
@@ -30,7 +30,7 @@ query generalOperationsStats($selector: OperationsStatsSelectorInput!, $resoluti
         }
       }
     }
-    ... on OperationsStats {
+    ... on OperationsStats @defer {
       clients {
         nodes {
           name

packages/web/app/src/lib/urql-cache.ts

@@ -1,6 +1,7 @@
 /* eslint-disable import/no-extraneous-dependencies */
+import { DocumentNode, Kind } from 'graphql';
 import { produce } from 'immer';
-import { getOperationName, TypedDocumentNode } from 'urql';
+import { TypedDocumentNode } from 'urql';
 import { ResultOf, VariablesOf } from '@graphql-typed-document-node/core';
 import { Cache, QueryInput, UpdateResolver } from '@urql/exchange-graphcache';
 import {
@@ -28,6 +29,14 @@ import {
   TokensDocument,
 } from '../graphql';
 
+export const getOperationName = (query: DocumentNode): string | undefined => {
+  for (const node of query.definitions) {
+    if (node.kind === Kind.OPERATION_DEFINITION) {
+      return node.name ? node.name.value : undefined;
+    }
+  }
+};
+
 function updateQuery<T, V>(cache: Cache, input: QueryInput<T, V>, recipe: (obj: T) => void) {
   return cache.updateQuery(input, (data: T | null) => {
     if (!data) {

packages/web/app/src/lib/urql.ts

@@ -1,4 +1,4 @@
-import { createClient, dedupExchange, errorExchange, fetchExchange } from 'urql';
+import { createClient, errorExchange, fetchExchange } from 'urql';
 import { cacheExchange } from '@urql/exchange-graphcache';
 import { Mutation } from './urql-cache';
 import { networkStatusExchange } from './urql-exchanges/state';
@@ -10,7 +10,6 @@ const SERVER_BASE_PATH = '/api/proxy';
 export const urqlClient = createClient({
   url: SERVER_BASE_PATH,
   exchanges: [
-    dedupExchange,
     cacheExchange({
       updates: {
         Mutation,