change parsing with memoization

src/core/graphQLClient.tsx

@@ -12,7 +12,7 @@ import { QueryCache } from "react-query";
 
 import { createOperation } from "./operation";
 import { createQueryCacheStore } from "./store/cacheStore";
-import type {
+import {
   Operation,
   QueryKey,
   InfiniteQueryKey,
@@ -25,6 +25,7 @@ import type {
   DebugEvent,
   GraphQLTaggedNode,
   Normalizer,
+  constants,
 } from "./types";
 import { createNormalizer } from "./normalizer";
 import type { GraphQLSubscriptionClient } from "./subscriptionClient";
@@ -112,6 +113,14 @@ export class GraphQLClient {
     return createOperation(node, options) as Operation<TQuery>;
   }
 
+  createFragmentRef(record, type, fragmentName) {
+    return {
+      [constants.ID_KEY]: this.normalizer.getDataID(record, type),
+      [constants.FRAGMENTS_KEY]: { [fragmentName]: {} },
+      [constants.FRAGMENT_OWNER_KEY]: { variables: {} },
+    };
+  }
+
   buildSubscription<TQuery extends Query>(
     operation: Operation<TQuery>,
     {

src/core/graphQLTag.tsx

@@ -1,6 +1,15 @@
+import { parseGraphQLTag } from "./parser";
 import { GraphQLTaggedNode } from "./types";
 
 export const graphql: (
   strings: TemplateStringsArray,
   ...values: (GraphQLTaggedNode | string)[]
-) => GraphQLTaggedNode | string = String.raw;
+) => GraphQLTaggedNode | string = (strings, ...values) =>
+  parseGraphQLTag(
+    String.raw(
+      strings,
+      ...values
+        .filter(Boolean)
+        .map((val) => (typeof val === "string" ? val : (val as any).text))
+    )
+  );

src/core/normalizer.tsx

@@ -207,5 +207,6 @@ export function createNormalizer({
 
   return {
     normalizeResponse,
+    getDataID,
   };
 }

src/core/operation.tsx

@@ -1,3 +1,4 @@
+// https://github.com/facebook/relay/blob/7c67b4750592e469d499128108fe16afe2adaf51/packages/relay-runtime/store/RelayModernSelector.js
 import type { ConcreteRequest, ReaderFragment } from "relay-runtime";
 import {
   getRequest as baseGetRequest,
@@ -12,27 +13,29 @@ import type {
   GraphQLTaggedNode,
   FetchOptions,
 } from "./types";
-import { parseRequest, parseFragment } from "./parser";
+import { parseGraphQLTag } from "./parser";
 
 export const getRequest = (
   taggedNode: GraphQLTaggedNode | string
 ): ConcreteRequest => {
   if (typeof taggedNode === "string") {
-    return parseRequest(taggedNode);
+    return parseGraphQLTag(taggedNode) as ConcreteRequest;
   }
 
+  // resolves the node from the require call for artifacts from relay-compiler, otherwise returns
   const request = baseGetRequest(taggedNode);
+
+  // Previously parsed by magiql
   if (
     typeof request === "object" &&
     request.params.metadata?.parser === "graphql"
   ) {
     return request as ConcreteRequest;
-  } else {
+  }
+  // Parsed by relay (require call for artifact from relay-compiler)
+  else {
     (request.params as any).text = (request as any).query;
-    (request.params as any).metadata = {
-      ...(request.params as any).metadata,
-      parser: "relay",
-    };
+    (request.params as any).metadata.parser = "relay";
     return request;
   }
 };
@@ -41,7 +44,7 @@ export const getFragment = (
   taggedNode: GraphQLTaggedNode | string
 ): ReaderFragment | null => {
   return typeof taggedNode === "string"
-    ? parseFragment(taggedNode)
+    ? (parseGraphQLTag(taggedNode) as ReaderFragment)
     : baseGetFragment(taggedNode);
 };
 

src/core/parser.tsx

@@ -1,16 +1,15 @@
 // Piggybacking off relay-runtime here
+// https://github.com/facebook/relay/blob/7c67b4750592e469d499128108fe16afe2adaf51/packages/relay-runtime/store/RelayModernSelector.js
 import type {
   ReaderFragment,
   NormalizationOperation,
   NormalizationField,
   NormalizationScalarField,
   NormalizationSelection,
+  ConcreteRequest,
 } from "relay-runtime";
 
-
-import {
-  constants,
-} from "./types";
+import { constants } from "./types";
 
 import { parse } from "graphql/language/parser";
 import { print } from "graphql/language/printer";
@@ -26,6 +25,7 @@ import {
   InlineFragmentNode,
   FieldNode,
 } from "graphql";
+import { stableStringify } from "../utils";
 
 const parseSelections = (selectionSet: SelectionSetNode) => {
   const selections: NormalizationSelection[] = selectionSet.selections.map(
@@ -118,7 +118,7 @@ const parseSelections = (selectionSet: SelectionSetNode) => {
   return selections;
 };
 
-const parsedOperation = (
+const parseOperation = (
   op: OperationDefinitionNode
 ): NormalizationOperation => {
   return {
@@ -291,39 +291,90 @@ const flattenFragments = (node: DocumentNode): DocumentNode => {
   return doc;
 };
 
-export const parseRequest = (taggedNode: string) => {
-  const node = parse(taggedNode);
+const memoized = <T extends any[], V>(
+  fn: (...args: T) => V,
+  serialize: (...args: T) => string
+) => {
+  const cache: { [key: string]: V } = {};
+  return (...vars: T) => {
+    const key = serialize(...vars);
+    if (cache[key]) {
+      return cache[key];
+    } else {
+      const val = fn(...vars);
+      if (val) {
+        cache[key] = val;
+      }
+      return val;
+    }
+  };
+};
+
+export const parseGraphQLTag = memoized(
+  (taggedNode: string): ReaderFragment | ConcreteRequest => {
+    try {
+      const node = parse(taggedNode);
+
+      const document = node.definitions.find(
+        (def) =>
+          def.kind === "OperationDefinition" ||
+          def.kind === "FragmentDefinition"
+      ) as OperationDefinitionNode | FragmentDefinitionNode;
+
+      if (!document) {
+        throw new Error(
+          "No GraphQL query/mutation/subscription/fragment found"
+        );
+      }
+      if (document.kind === "FragmentDefinition") {
+        return parseFragment(node, taggedNode);
+      } else {
+        return parseRequest(node, taggedNode);
+      }
+    } catch (e) {
+      console.log("Error parsing GraphQL", e.message, taggedNode);
+    }
+  },
+  (s) => s
+);
+
+export const parseRequest = (
+  node: DocumentNode,
+  taggedNode: string
+): ConcreteRequest => {
   const flatNode = flattenFragments(inlineFragments(node));
   const flatNodeWithTypename = addTypeName(flatNode);
 
-  const document = flatNodeWithTypename.definitions.find(
+  const queryDocument = flatNodeWithTypename.definitions.find(
+    (def) => def.kind === "OperationDefinition"
+  ) as OperationDefinitionNode;
+
+  const fragmentDocument = node.definitions.find(
     (def) => def.kind === "OperationDefinition"
   ) as OperationDefinitionNode;
 
   return {
     kind: "Request",
-    fragment: parsedOperation(
-      node.definitions.find(
-        (def) => def.kind === "OperationDefinition"
-      ) as OperationDefinitionNode
-    ) as ReaderFragment,
-    operation: parsedOperation(document),
+    fragment: parseOperation(fragmentDocument) as ReaderFragment,
+    operation: parseOperation(queryDocument),
+    text: taggedNode,
     params: {
-      operationKind: document.operation,
-      name: document.name.value,
-      id: document.name.value,
+      operationKind: queryDocument.operation,
+      name: queryDocument.name.value,
+      id: queryDocument.name.value,
       cacheID: "",
-      text: print(document),
+      text: print(queryDocument),
       metadata: {
         parser: "graphql",
+        // TODO: parse plural
       },
     },
-  };
+  } as ConcreteRequest;
 };
-
-export const parseFragment = (taggedNode: string) => {
-  const node = parse(taggedNode);
-
+export const parseFragment = (
+  node: DocumentNode,
+  taggedNode: string
+): ReaderFragment => {
   const fragment = node.definitions.find(
     (def) => def.kind === "FragmentDefinition"
   ) as FragmentDefinitionNode;
@@ -336,7 +387,6 @@ export const parseFragment = (taggedNode: string) => {
     selections: parseSelections(fragment.selectionSet),
     type: fragment.typeCondition.name.value,
     abstractKey: null,
+    text: taggedNode,
   } as ReaderFragment;
 };
-
-

src/core/types.tsx

@@ -157,6 +157,7 @@ export interface Normalizer {
     data: Response<TQuery>,
     operation: Operation<TQuery>
   ) => { [key: string]: object };
+  getDataID: GetDataID;
 }
 
 export interface Store {

src/hooks/useFragment.ts

@@ -5,7 +5,6 @@ import {
   KeyReturnType,
   GraphQLTaggedNode,
 } from "../core/types";
-import { assertBabelPlugin } from "../utils";
 import { useGraphQLStore } from "./useGraphQLStore";
 
 export function useFragment<TKey extends KeyType>(
@@ -14,6 +13,6 @@ export function useFragment<TKey extends KeyType>(
 ): $Call<KeyReturnType<TKey>> {
   const node = getFragment(fragmentNode);
   const store = useGraphQLStore();
-  const data = store.useFragment(node as any, fragmentRef);
+  const data = store.useFragment(node, fragmentRef);
   return data;
 }