infra(graphql): upgrade graphql to v16 and apollo-server to v4

README.md

@@ -31,12 +31,12 @@ You can use Bit components to build new projects or reuse components to moderniz
 - [Backend services](https://bit.dev/docs/quick-start/platforms)
 - [Design systems](https://bit.dev/docs/quick-start/design-system)
 - [Composable platforms](https://bit.dev/docs/composable-platforms)
-- [Shell applications](https://bit.dev/docs/quick-start/react) 
+- [Shell applications](https://bit.dev/docs/quick-start/react)
 - [Micro frontends](https://bit.dev/docs/micro-frontends/react-micro-frontends)
 
 Bit supports all tooling in the JS ecosystem and comes out of the box with official dev environments for [NodeJS](https://bit.dev/docs/backend-intro), [React](https://bit.dev/docs/react-intro), [Angular](https://bit.dev/docs/angular-introduction), [Vue](https://bit.dev/docs/vue-intro), [React Native](https://bit.dev/docs/react-native-intro), [NextJS](https://bit.dev/docs/quick-start/hello-world-nextjs) and [far more](https://bit.dev/docs). All are native to TypeScript and ESM and equipped with the best dev tooling.
 
-Bit is a fit to every codebase structure. You can use Bit components in a monorepo, polyrepo, or even without repositories at all. 
+Bit is a fit to every codebase structure. You can use Bit components in a monorepo, polyrepo, or even without repositories at all.
 
 ## Getting started
 
@@ -73,7 +73,7 @@ bit create react hello-world
 You can find simple guides for creating NodeJS modules, UI components and apps, backend services and more on the [Create Component docs](https://bit.dev/docs/getting-started/composing/creating-components/). Run the Bit UI to preview components using the following command:
 
 ```
-bit start 
+bit start
 ```
 
 Use `bit run` to preview applications during development. To create an application, follow the [Create App docs section](https://bit.dev/docs/getting-started/composing/create-apps/).

components/hooks/use-lane-components/use-lane-components.tsx

@@ -1,11 +1,11 @@
-import { useDataQuery } from '@teambit/ui-foundation.ui.hooks.use-data-query';
-import { gql } from '@apollo/client';
+import { useQuery as useDataQuery, DocumentNode } from '@apollo/client';
+import { gql } from 'graphql-tag';
 import { ComponentID, ComponentModel, componentOverviewFields } from '@teambit/component';
 import { LaneId } from '@teambit/lane-id';
 import { ComponentDescriptor } from '@teambit/component-descriptor';
 import { compact } from 'lodash';
 
-const GET_LANE_COMPONENTS = gql`
+const GET_LANE_COMPONENTS: DocumentNode = gql`
   query LaneComponent($ids: [String!], $extensionId: String, $skipList: Boolean!) {
     lanes {
       id

components/hooks/use-lanes/use-lanes.tsx

@@ -1,12 +1,12 @@
 import { useMemo, useCallback } from 'react';
-import { useDataQuery } from '@teambit/ui-foundation.ui.hooks.use-data-query';
-import { LaneModel, LanesModel, LanesQuery } from '@teambit/lanes.ui.models.lanes-model';
-import { gql } from '@apollo/client';
+import { useQuery as useDataQuery, DocumentNode } from '@apollo/client';
+import { LaneModel, LanesModel } from '@teambit/lanes.ui.models.lanes-model';
+import { gql } from 'graphql-tag';
 import { LaneId } from '@teambit/lane-id';
 import { isEqual } from 'lodash';
 import { useLanesContext } from './lanes-context';
 
-const GET_LANES = gql`
+const GET_LANES: DocumentNode = gql`
   query Lanes(
     $extensionId: String
     $laneIds: [String!]
@@ -170,7 +170,7 @@ type UseRootLanes = (
 const useRootLanes: UseRootLanes = (viewedLaneId, skip, options = {}, scope) => {
   const { ids, offset, limit, sort } = options;
 
-  const { data, fetchMore, loading } = useDataQuery<LanesQuery>(GET_LANES, {
+  const { data, fetchMore, loading } = useDataQuery(GET_LANES, {
     variables: {
       laneIds: ids,
       offset,
@@ -258,7 +258,7 @@ const useRootLanes: UseRootLanes = (viewedLaneId, skip, options = {}, scope) =>
 };
 
 export const useSearchLanes: SearchLanes = (search, skip) => {
-  const { data: searchData, loading: loadingSearch } = useDataQuery<LanesQuery>(GET_LANES, {
+  const { data: searchData, loading: loadingSearch } = useDataQuery(GET_LANES, {
     variables: {
       search,
       skipViewedLane: true,

components/ui/compare/lane-compare-hooks/use-lane-diff-status/use-lane-diff-status.ts

@@ -0,0 +1,95 @@
+import { useQuery as useDataQuery, DocumentNode } from '@apollo/client';
+import { gql } from 'graphql-tag';
+import { LaneId } from '@teambit/lane-id';
+import { ComponentID, ComponentIdObj } from '@teambit/component-id';
+import { LaneDiff, PlainLaneDiff, ChangeType } from '@teambit/lanes.entities.lane-diff';
+
+export type LaneDiffStatusQueryResponse = {
+  lanes: {
+    diffStatus: {
+      source: { name: string; scope: string };
+      target: { name: string; scope: string };
+      upToDate: boolean;
+      componentsStatus: Array<{
+        componentId: ComponentIdObj;
+        changes: ChangeType[];
+        upToDate: boolean;
+        sourceHead: string;
+        targetHead?: string;
+      }>;
+    };
+  };
+};
+
+export const QUERY_LANE_DIFF_STATUS: DocumentNode = gql`
+  query LaneDiffStatus($source: String!, $target: String!, $options: DiffStatusOptions) {
+    lanes {
+      id
+      diffStatus(source: $source, target: $target, options: $options) {
+        id
+        source {
+          name
+          scope
+        }
+        target {
+          name
+          scope
+        }
+        componentsStatus {
+          id
+          componentId {
+            scope
+            name
+            version
+          }
+          sourceHead
+          targetHead
+          changes
+          upToDate
+          unrelated
+        }
+      }
+    }
+  }
+`;
+
+export type UseLaneDiffStatusResult = { loading?: boolean; laneDiff?: LaneDiff };
+export type UseLaneDiffStatus = (props: UseLaneDiffStatusProps) => UseLaneDiffStatusResult;
+export type UseLaneDiffStatusOptions = {
+  skipChanges?: boolean;
+  skipUpToDate?: boolean;
+};
+
+export type UseLaneDiffStatusProps = {
+  baseId?: string;
+  compareId?: string;
+  options?: UseLaneDiffStatusOptions;
+};
+
+export const useLaneDiffStatus: UseLaneDiffStatus = ({ baseId, compareId, options }) => {
+  const { data, loading } = useDataQuery<LaneDiffStatusQueryResponse>(QUERY_LANE_DIFF_STATUS, {
+    variables: {
+      source: compareId,
+      target: baseId,
+      options,
+    },
+    skip: !baseId || !compareId,
+  });
+
+  const plainLaneDiff: PlainLaneDiff | undefined = data?.lanes.diffStatus && {
+    sourceLane: LaneId.from(data.lanes.diffStatus.source.name, data.lanes.diffStatus.source.scope).toString(),
+    targetLane: LaneId.from(data.lanes.diffStatus.target.name, data.lanes.diffStatus.target.scope).toString(),
+    diff: data.lanes.diffStatus.componentsStatus.map((c) => ({
+      ...c,
+      changes: c.changes || [],
+      componentId: ComponentID.fromObject(c.componentId).toString(),
+    })),
+  };
+
+  const laneDiff = plainLaneDiff && LaneDiff.from(plainLaneDiff);
+
+  return {
+    loading,
+    laneDiff,
+  };
+};

components/ui/hooks/use-core-aspects/use-core-aspects.tsx

@@ -1,11 +1,11 @@
-import { useDataQuery } from '@teambit/ui-foundation.ui.hooks.use-data-query';
-import { gql } from '@apollo/client';
+import { useQuery as useDataQuery, DocumentNode } from '@apollo/client';
+import { gql } from 'graphql-tag';
 
 export type CoreAspectIdByPackageName = {
   [packageName: string]: string;
 };
 
-const GET_CORE_ASPECTS = gql`
+const GET_CORE_ASPECTS: DocumentNode = gql`
   query CoreAspects {
     coreAspects
   }

scopes/api-reference/hooks/use-api/use-api.ts

@@ -1,9 +1,9 @@
-import { useDataQuery } from '@teambit/ui-foundation.ui.hooks.use-data-query';
-import { gql } from '@apollo/client';
+import { useQuery as useDataQuery, DocumentNode } from '@apollo/client';
+import { gql } from 'graphql-tag';
 import { APIReferenceModel } from '@teambit/api-reference.models.api-reference-model';
 import { APINodeRenderer } from '@teambit/api-reference.models.api-node-renderer';
 
-const GET_SCHEMA = gql`
+const GET_SCHEMA: DocumentNode = gql`
   query Schema($componentId: String!, $skipInternals: Boolean) {
     getHost {
       id # used for GQL caching

scopes/api-reference/hooks/use-schema/use-schema.ts

@@ -1,9 +1,9 @@
-import { DataQueryResult, useDataQuery } from '@teambit/ui-foundation.ui.hooks.use-data-query';
-import { gql } from '@apollo/client';
-import { SchemaQueryResult, APIReferenceModel } from '@teambit/api-reference.models.api-reference-model';
+import { useQuery as useDataQuery, DocumentNode } from '@apollo/client';
+import { gql } from 'graphql-tag';
+import { APIReferenceModel } from '@teambit/api-reference.models.api-reference-model';
 import { APINodeRenderer } from '@teambit/api-reference.models.api-node-renderer';
 
-const GET_SCHEMA = gql`
+const GET_SCHEMA: DocumentNode = gql`
   query Schema($extensionId: String!, $componentId: String!) {
     getHost(id: $extensionId) {
       id # used for GQL caching
@@ -16,11 +16,8 @@ export function useSchema(
   host: string,
   componentId: string,
   apiNodeRenderers: APINodeRenderer[]
-): { apiModel?: APIReferenceModel } & Omit<
-  DataQueryResult<SchemaQueryResult, { extensionId: string; componentId: string }>,
-  'data'
-> {
-  const { data, ...rest } = useDataQuery(GET_SCHEMA, {
+): { apiModel?: APIReferenceModel; loading?: boolean } {
+  const { data, loading } = useDataQuery(GET_SCHEMA, {
     variables: {
       extensionId: host,
       componentId,
@@ -30,7 +27,7 @@ export function useSchema(
   const apiModel = data?.getHost?.getSchema ? APIReferenceModel.from(data, apiNodeRenderers) : undefined;
 
   return {
-    ...rest,
+    loading,
     apiModel,
   };
 }

scopes/cloud/cloud/cloud.main.runtime.ts

@@ -272,6 +272,7 @@ export class CloudMain {
           const { clientId: clientIdFromReq, redirectUri, username: usernameFromReq } = req.query;
           const username = typeof usernameFromReq === 'string' ? usernameFromReq : undefined;
           let { token } = req.query;
+
           if (Array.isArray(token)) {
             token = token[0];
           }

scopes/cloud/hooks/use-cloud-scopes/use-cloud-scopes.ts

@@ -1,9 +1,9 @@
-import { useDataQuery } from '@teambit/ui-foundation.ui.hooks.use-data-query';
-import { gql } from '@apollo/client';
+import { useQuery as useDataQuery, DocumentNode } from '@apollo/client';
+import { gql } from 'graphql-tag';
 import { ScopeDescriptor } from '@teambit/scopes.scope-descriptor';
 import { ScopeID } from '@teambit/scopes.scope-id';
 
-export const GET_CLOUD_SCOPES_QUERY = gql`
+export const GET_CLOUD_SCOPES_QUERY: DocumentNode = gql`
   query GET_CLOUD_SCOPES($ids: [String!]) {
     getCloudScopes(ids: $ids) {
       id

scopes/cloud/hooks/use-current-user/use-current-user.ts

@@ -1,8 +1,8 @@
-import { useDataQuery } from '@teambit/ui-foundation.ui.hooks.use-data-query';
-import { gql } from '@apollo/client';
+import { useQuery as useDataQuery, DocumentNode } from '@apollo/client';
+import { gql } from 'graphql-tag';
 import { CloudUser } from '@teambit/cloud.models.cloud-user';
 
-export const CURRENT_USER_QUERY = gql`
+export const CURRENT_USER_QUERY: DocumentNode = gql`
   query CurrentUser($redirectUrl: String!) {
     getCurrentUser {
       username

scopes/cloud/hooks/use-logout/use-logout.ts

@@ -1,7 +1,7 @@
 import { useMutation } from '@teambit/ui';
-import { gql } from '@apollo/client';
+import { gql, DocumentNode } from '@apollo/client';
 
-export const LOGOUT_MUTATION = gql`
+export const LOGOUT_MUTATION: DocumentNode = gql`
   mutation LogoutUser {
     logout
   }

scopes/compilation/bundler/dev-server.graphql.ts

@@ -1,6 +1,6 @@
 import { Component } from '@teambit/component';
 import { Schema } from '@teambit/graphql';
-import { gql } from '@apollo/client';
+import { gql } from 'graphql-tag';
 
 import { BundlerMain } from './bundler.main.runtime';
 
@@ -26,6 +26,7 @@ export function devServerSchema(bundler: BundlerMain): Schema {
           // the gotHost.get query is "id".
           // see it in scopes/component/component/component.graphql.ts
           const requestedId = context.body.variables.id;
+
           // if we ask for specific id with specific version it means we want to fetch if from scope
           // so don't return the server url
           // see https://github.com/teambit/bit/issues/5328

scopes/component/component/component.graphql.ts

@@ -1,6 +1,6 @@
 import stripAnsi from 'strip-ansi';
 import { gql } from 'graphql-tag';
-import { GraphQLJSONObject } from 'graphql-type-json';
+import { GraphQLJSONObject } from 'graphql-scalars';
 import { ComponentID, ComponentIdObj } from '@teambit/component-id';
 import { pathNormalizeToLinux } from '@teambit/toolbox.path.path';
 import { ComponentLog } from '@teambit/legacy/dist/scope/models/model-component';

scopes/component/component/host/use-component-host.ts

@@ -1,9 +1,9 @@
-import { useDataQuery } from '@teambit/ui-foundation.ui.hooks.use-data-query';
-import { gql } from '@apollo/client';
+import { useQuery as useDataQuery, DocumentNode } from '@apollo/client';
+import { gql } from 'graphql-tag';
 
 import { ComponentHostModel } from './component-host-model';
 
-const COMPONENT_HOST = gql`
+const COMPONENT_HOST: DocumentNode = gql`
   {
     getHost {
       id # used for GQL caching

scopes/component/component/ui/aspect-page/aspect-page.tsx

@@ -1,14 +1,14 @@
 import { AspectBox } from '@teambit/harmony.ui.aspect-box';
 import React, { useContext } from 'react';
-import { useDataQuery } from '@teambit/ui-foundation.ui.hooks.use-data-query';
-import { gql } from '@apollo/client';
+import { useQuery as useDataQuery, DocumentNode } from '@apollo/client';
+import { gql } from 'graphql-tag';
 import { EmptyBox } from '@teambit/design.ui.empty-box';
 import { H1 } from '@teambit/documenter.ui.heading';
 import { Separator } from '@teambit/documenter.ui.separator';
 import styles from './aspect-page.module.scss';
 import { ComponentContext } from '../context';
 
-const GET_COMPONENT = gql`
+const GET_COMPONENT: DocumentNode = gql`
   query ($id: String!) {
     getHost {
       get(id: $id) {

scopes/component/component/ui/use-component-logs.ts

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 import { LegacyComponentLog } from '@teambit/legacy-component-log';
-import { useDataQuery } from '@teambit/ui-foundation.ui.hooks.use-data-query';
+import { useQuery as useDataQuery } from '@apollo/client';
 import { ComponentLogsResult, Filters } from './use-component.model';
 import { GET_COMPONENT_WITH_LOGS } from './use-component.fragments';
 import { ComponentError } from './component-error';