@teambit/graphql 0.0.568 → 0.0.572

package/create-remote-schemas/create-remote-schemas.ts

@@ -0,0 +1,58 @@
+import fetch from 'node-fetch';
+import { setContext } from 'apollo-link-context';
+import { HttpLink } from 'apollo-link-http';
+import { makeRemoteExecutableSchema, introspectSchema } from 'apollo-server';
+import { WebSocketLink } from 'apollo-link-ws';
+import { split } from 'apollo-link';
+import { getMainDefinition } from 'apollo-utilities';
+import { SubscriptionClient } from 'subscriptions-transport-ws';
+import ws from 'ws';
+import { GraphQLServer } from '../graphql-server';
+
+async function getRemoteSchema({ uri, subscriptionsUri }) {
+  // @ts-ignore
+  const http = new HttpLink({ uri, fetch });
+  const httpLink = setContext((request, previousContext) => {
+    return {
+      headers: previousContext?.graphqlContext?.headers,
+    };
+  }).concat(http);
+
+  if (!subscriptionsUri) {
+    return makeRemoteExecutableSchema({
+      schema: await introspectSchema(httpLink),
+      link: httpLink,
+    });
+  }
+
+  // Create WebSocket link with custom client
+  const client = new SubscriptionClient(subscriptionsUri, { reconnect: true }, ws);
+  const wsLink = new WebSocketLink(client);
+
+  // Using the ability to split links, we can send data to each link
+  // depending on what kind of operation is being sent
+  const link = split(
+    (operation) => {
+      const definition = getMainDefinition(operation.query);
+      return definition.kind === 'OperationDefinition' && definition.operation === 'subscription';
+    },
+    wsLink,
+    httpLink
+  );
+
+  return makeRemoteExecutableSchema({
+    schema: await introspectSchema(httpLink),
+    link,
+  });
+}
+
+export async function createRemoteSchemas(servers: GraphQLServer[]) {
+  const schemasP = servers.map(async (server) => {
+    return getRemoteSchema({
+      uri: server.uri,
+      subscriptionsUri: server.subscriptionsUri,
+    });
+  });
+
+  return Promise.all(schemasP);
+}

package/create-remote-schemas/index.ts

@@ -0,0 +1 @@
+export { createRemoteSchemas } from './create-remote-schemas';

package/graphql-provider/graphql-provider.tsx

@@ -0,0 +1,12 @@
+import React, { ReactNode } from 'react';
+import { ApolloProvider } from '@apollo/client';
+import type { GraphQLClient } from '../graphql.ui.runtime';
+
+export type GraphQLProviderProps = {
+  client: GraphQLClient<any>;
+  children: ReactNode;
+};
+
+export function GraphQLProvider({ client, children }: GraphQLProviderProps) {
+  return <ApolloProvider client={client}>{children}</ApolloProvider>;
+}

package/graphql-provider/index.ts

@@ -0,0 +1 @@
+export { GraphQLProvider } from './graphql-provider';

package/graphql.preview.runtime.tsx

@@ -0,0 +1,7 @@
+import { PreviewRuntime } from '@teambit/preview';
+
+import { GraphqlAspect } from './graphql.aspect';
+import { GraphqlUI } from './graphql.ui.runtime';
+
+GraphqlUI.runtime = PreviewRuntime;
+GraphqlAspect.addRuntime(GraphqlUI);

package/graphql.ui.runtime.tsx

@@ -0,0 +1,103 @@
+import React, { ReactNode } from 'react';
+import { UIRuntime } from '@teambit/ui';
+
+import { InMemoryCache, ApolloClient, ApolloLink, HttpLink, createHttpLink } from '@apollo/client';
+import type { NormalizedCacheObject } from '@apollo/client';
+import { WebSocketLink } from '@apollo/client/link/ws';
+import { onError } from '@apollo/client/link/error';
+
+import crossFetch from 'cross-fetch';
+
+import { createSplitLink } from './create-link';
+import { GraphQLProvider } from './graphql-provider';
+import { GraphqlAspect } from './graphql.aspect';
+import { GraphqlRenderLifecycle } from './render-lifecycle';
+import { logError } from './logging';
+
+/**
+ * Type of gql client.
+ * Used to abstract Apollo client, so consumers could import the type from graphql.ui, and not have to depend on @apollo/client directly
+ * */
+export type GraphQLClient<T> = ApolloClient<T>;
+
+type ClientOptions = {
+  /** Preset in-memory cache with state (e.g. continue state from SSR) */
+  state?: NormalizedCacheObject;
+  /** endpoint for websocket connections */
+  subscriptionUri?: string;
+};
+
+export class GraphqlUI {
+  createClient(uri: string, { state, subscriptionUri }: ClientOptions = {}) {
+    const client = new ApolloClient({
+      link: this.createLink(uri, { subscriptionUri }),
+      cache: this.createCache({ state }),
+    });
+
+    return client;
+  }
+
+  createSsrClient({ serverUrl, headers }: { serverUrl: string; headers: any }) {
+    const link = ApolloLink.from([
+      onError(logError),
+      createHttpLink({
+        credentials: 'include',
+        uri: serverUrl,
+        headers,
+        fetch: crossFetch,
+      }),
+    ]);
+
+    const client = new ApolloClient({
+      ssrMode: true,
+      link,
+      cache: this.createCache(),
+    });
+
+    return client;
+  }
+
+  private createCache({ state }: { state?: NormalizedCacheObject } = {}) {
+    const cache = new InMemoryCache();
+
+    if (state) cache.restore(state);
+
+    return cache;
+  }
+
+  private createLink(uri: string, { subscriptionUri }: { subscriptionUri?: string } = {}) {
+    const httpLink = new HttpLink({ credentials: 'include', uri });
+    const subsLink = subscriptionUri
+      ? new WebSocketLink({
+          uri: subscriptionUri,
+          options: { reconnect: true },
+        })
+      : undefined;
+
+    const hybridLink = subsLink ? createSplitLink(httpLink, subsLink) : httpLink;
+    const errorLogger = onError(logError);
+
+    return ApolloLink.from([errorLogger, hybridLink]);
+  }
+
+  /**
+   * get the graphQL provider
+   */
+  getProvider = ({ client, children }: { client: GraphQLClient<any>; children: ReactNode }) => {
+    return <GraphQLProvider client={client}>{children}</GraphQLProvider>;
+  };
+
+  renderHooks = new GraphqlRenderLifecycle(this);
+
+  static runtime = UIRuntime;
+  static dependencies = [];
+  static slots = [];
+
+  static async provider() {
+    const graphqlUI = new GraphqlUI();
+
+    return graphqlUI;
+  }
+}
+
+GraphqlAspect.addRuntime(GraphqlUI);

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@teambit/graphql",
-  "version": "0.0.568",
+  "version": "0.0.572",
   "homepage": "https://bit.dev/teambit/harmony/graphql",
   "main": "dist/index.js",
   "componentId": {
     "scope": "teambit.harmony",
     "name": "graphql",
-    "version": "0.0.568"
+    "version": "0.0.572"
   },
   "dependencies": {
     "@teambit/harmony": "0.2.11",
@@ -32,12 +32,12 @@
     "bufferutil": "4.0.3",
     "@babel/runtime": "7.12.18",
     "core-js": "^3.0.0",
-    "@teambit/cli": "0.0.394",
-    "@teambit/logger": "0.0.480",
-    "@teambit/toolbox.network.get-port": "0.0.98",
-    "@teambit/preview": "0.0.568",
-    "@teambit/ui": "0.0.568",
-    "@teambit/ui-foundation.ui.is-browser": "0.0.471"
+    "@teambit/cli": "0.0.395",
+    "@teambit/logger": "0.0.483",
+    "@teambit/toolbox.network.get-port": "0.0.99",
+    "@teambit/preview": "0.0.572",
+    "@teambit/ui": "0.0.572",
+    "@teambit/ui-foundation.ui.is-browser": "0.0.472"
   },
   "devDependencies": {
     "@types/cors": "2.8.10",
@@ -54,7 +54,7 @@
   "peerDependencies": {
     "@apollo/client": "^3.0.0",
     "graphql": "14.7.0",
-    "@teambit/legacy": "1.0.180",
+    "@teambit/legacy": "1.0.181",
     "react-dom": "^16.8.0 || ^17.0.0",
     "react": "^16.8.0 || ^17.0.0"
   },
@@ -84,27 +84,12 @@
         "react": "-"
       },
       "peerDependencies": {
-        "@teambit/legacy": "1.0.180",
+        "@teambit/legacy": "1.0.181",
         "react-dom": "^16.8.0 || ^17.0.0",
         "react": "^16.8.0 || ^17.0.0"
       }
     }
   },
-  "files": [
-    "dist",
-    "!dist/tsconfig.tsbuildinfo",
-    "**/*.md",
-    "**/*.mdx",
-    "**/*.js",
-    "**/*.json",
-    "**/*.sass",
-    "**/*.scss",
-    "**/*.less",
-    "**/*.css",
-    "**/*.css",
-    "**/*.jpeg",
-    "**/*.gif"
-  ],
   "private": false,
   "engines": {
     "node": ">=12.22.0"

package/render-lifecycle.tsx

@@ -0,0 +1,91 @@
+import React, { ReactNode } from 'react';
+import { getDataFromTree } from '@apollo/client/react/ssr';
+import type { NormalizedCacheObject } from '@apollo/client';
+import pick from 'lodash.pick';
+
+import { isBrowser } from '@teambit/ui-foundation.ui.is-browser';
+import type { BrowserData, RenderLifecycle } from '@teambit/ui';
+
+import type { GraphqlUI, GraphQLClient } from './graphql.ui.runtime';
+import { GraphQLProvider } from './graphql-provider';
+
+type RenderContext = {
+  client: GraphQLClient<any>;
+};
+
+const ALLOWED_HEADERS = ['cookie'];
+
+export class GraphqlRenderLifecycle implements RenderLifecycle<RenderContext, { state?: NormalizedCacheObject }> {
+  constructor(private graphqlUI: GraphqlUI) {}
+
+  serverInit = ({ browser, server }: { browser?: BrowserData; server?: { port: number } } = {}) => {
+    if (!browser) return undefined;
+
+    const port = server?.port || 3000;
+    const serverUrl = `http://localhost:${port}/graphql`;
+
+    const client = this.graphqlUI.createSsrClient({
+      serverUrl,
+      headers: pick(browser.connection.headers, ALLOWED_HEADERS),
+    });
+
+    const ctx: RenderContext = { client };
+    return ctx;
+  };
+
+  /**
+   * Eagerly and recursively execute all gql queries in the app.
+   * Data will be available in gqlClient.extract()
+   */
+  onBeforeRender = async (ctx: RenderContext, app: ReactNode) => {
+    await getDataFromTree(app);
+  };
+
+  serialize = (ctx?: RenderContext) => {
+    const client = ctx?.client;
+    if (!client) return undefined;
+
+    return {
+      json: JSON.stringify(client.extract()),
+    };
+  };
+
+  deserialize = (raw?: string) => {
+    if (!raw) return { state: undefined };
+    let state: NormalizedCacheObject | undefined;
+    try {
+      state = JSON.parse(raw);
+    } catch (e) {
+      // eslint-disable-next-line no-console
+      console.error('[GraphQL] failed deserializing state from DOM', e);
+    }
+
+    return { state };
+  };
+
+  browserInit = ({ state }: { state?: NormalizedCacheObject } = {}) => {
+    const { location } = window;
+    const isInsecure = location.protocol === 'http:';
+    const wsUrl = `${isInsecure ? 'ws:' : 'wss:'}//${location.host}/subscriptions`;
+
+    const client = this.graphqlUI.createClient('/graphql', { state, subscriptionUri: wsUrl });
+
+    return { client };
+  };
+
+  private BrowserGqlProvider = ({ renderCtx, children }: { renderCtx?: RenderContext; children: ReactNode }) => {
+    if (!renderCtx?.client) throw new TypeError('GQL client is not initialized, make sure `.browserInit()` executes');
+
+    return <this.graphqlUI.getProvider client={renderCtx?.client}>{children}</this.graphqlUI.getProvider>;
+  };
+
+  reactContext = isBrowser ? this.BrowserGqlProvider : ServerGqlProvider;
+}
+
+function ServerGqlProvider({ renderCtx, children }: { renderCtx?: RenderContext; children: ReactNode }) {
+  if (!renderCtx?.client)
+    throw new TypeError('GQL client has not been initialized during SSR, make sure `.serverInit()` executes');
+
+  const { client } = renderCtx;
+  return <GraphQLProvider client={client}>{children}</GraphQLProvider>;
+}

package/types/asset.d.ts

@@ -0,0 +1,29 @@
+declare module '*.png' {
+  const value: any;
+  export = value;
+}
+declare module '*.svg' {
+  import type { FunctionComponent, SVGProps } from 'react';
+
+  export const ReactComponent: FunctionComponent<SVGProps<SVGSVGElement> & { title?: string }>;
+  const src: string;
+  export default src;
+}
+
+// @TODO Gilad
+declare module '*.jpg' {
+  const value: any;
+  export = value;
+}
+declare module '*.jpeg' {
+  const value: any;
+  export = value;
+}
+declare module '*.gif' {
+  const value: any;
+  export = value;
+}
+declare module '*.bmp' {
+  const value: any;
+  export = value;
+}

package/types/style.d.ts

@@ -0,0 +1,42 @@
+declare module '*.module.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+declare module '*.module.scss' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+declare module '*.module.sass' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.module.less' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.less' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.sass' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.scss' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.mdx' {
+  const component: any;
+  export default component;
+}