Add cwd option to fix loader + jestTransformer when using moved cache + config options

README.md

@@ -13,17 +13,17 @@ integrating graphql-let. [A blog post](https://the-guild.dev/blog/graphql-let)
 
 ## Table of Contents
 
--   [Why this exists](#why-this-exists)
--   [Entrypoints and features](#entrypoints-and-features)
--   [Getting started with webpack loader](#getting-started-with-webpack-loader)
--   [Getting started with babel-plugin-macros](#getting-started-with-babel-plugin-macros)
--   [Getting started with Babel Plugin](#getting-started-with-babel-plugin)
--   [Difference between .graphql-let.yml and codegen.yml](#difference-between-graphql-letyml-and-codegenyml)
--   [Jest Transformer](#jest-transformer)
--   [Experimental feature: Resolver Types](#experimental-feature-resolver-types)
--   [FAQ](#faq)
--   [Contribution](#contribution)
--   [License](#license)
+- [Why this exists](#why-this-exists)
+- [Entrypoints and features](#entrypoints-and-features)
+- [Getting started with webpack loader](#getting-started-with-webpack-loader)
+- [Getting started with babel-plugin-macros](#getting-started-with-babel-plugin-macros)
+- [Getting started with Babel Plugin](#getting-started-with-babel-plugin)
+- [Difference between .graphql-let.yml and codegen.yml](#difference-between-graphql-letyml-and-codegenyml)
+- [Jest Transformer](#jest-transformer)
+- [Experimental feature: Resolver Types](#experimental-feature-resolver-types)
+- [FAQ](#faq)
+- [Contribution](#contribution)
+- [License](#license)
 
 ## Why this exists
 
@@ -55,10 +55,10 @@ const News: React.FC = () => {
 
 Summary of characteristics of each entrypoint.
 
--   **CLI** for efficient code generation before your type checking
--   **webpack loader** to get HMR even on modifying GraphQL documents
--   **babel-plugin-macros** for the minimum configuration
--   **Babel plugin** if you don't want babel-plugin-macros
+- **CLI** for efficient code generation before your type checking
+- **webpack loader** to get HMR even on modifying GraphQL documents
+- **babel-plugin-macros** for the minimum configuration
+- **Babel plugin** if you don't want babel-plugin-macros
 
 All of them mostly do the same behind the scene.
 
@@ -125,14 +125,14 @@ Note there are a few differences between the entrypoints.
 
 There are things to make graphql-let light and stable.
 
--   Sharing the processes. Generating files is expensive, so it runs less time
-    to run GraphQL code generator and TypeScript API.
--   Caching. Embedding hashes, as your source states, reduces the number of
-    unnecessary processing.
--   Sharing the promises. The webpack compilation in typical SSR applications as
-    Next.js runs [targets](https://webpack.js.org/concepts/targets/) of `"node"`
-    and `"web"` simultaneously. If sources are the same, the compilation should
-    be once.
+- Sharing the processes. Generating files is expensive, so it runs less time
+  to run GraphQL code generator and TypeScript API.
+- Caching. Embedding hashes, as your source states, reduces the number of
+  unnecessary processing.
+- Sharing the promises. The webpack compilation in typical SSR applications as
+  Next.js runs [targets](https://webpack.js.org/concepts/targets/) of `"node"`
+  and `"web"` simultaneously. If sources are the same, the compilation should
+  be once.
 
 </details>
 
@@ -214,6 +214,7 @@ Please note that files in `cacheDir` are only intermediate cache, possibly havin
 +   "excludes": [".cache"]
   }
 ```
+
 Also, remember you have to `.gitignore` the `.cache` directory in the next section.
 
 ### 3. Add lines to .gitignore
@@ -460,6 +461,15 @@ respectGitIgnore: true
 cacheDir: node_modules/.cache/graphql-let
 cacheDir: .cache
 
+# "cwd", optional. Directory of the config file itself by default.
+# When evaluating `documents`, `cacheDir`, `schema`, what should be the "root" dir.
+# Because the cache is stored as a literal subdirectory matching the documents,
+# the search paths must share a common ancestor defined here.
+# Practically, this allows the config file and other folders
+# to be stored outside the process directory
+# Example:
+cwd: ../../
+
 # "TSConfigFile", optional. `tsconfig.json` by default.
 # You can specify a custom config for generating `.d.ts`s.
 # Examples:
@@ -480,45 +490,45 @@ silent: false
 Simple example:
 
 ```yaml
-schema: "schema/**/*.graphqls"
+schema: 'schema/**/*.graphqls'
 documents:
-    - "**/*.graphql"
-    - "!shouldBeIgnored1"
+  - '**/*.graphql'
+  - '!shouldBeIgnored1'
 plugins:
-    - typescript-operations
-    - typescript-react-apollo
+  - typescript-operations
+  - typescript-react-apollo
 ```
 
 Example with a bit more complicated options:
 
 ```yaml
 schema:
-    - https://api.github.com/graphql:
-          headers:
-              Authorization: YOUR-TOKEN-HERE
+  - https://api.github.com/graphql:
+      headers:
+        Authorization: YOUR-TOKEN-HERE
 documents:
-    - "**/*.graphql"
-    - "!shouldBeIgnored1"
+  - '**/*.graphql'
+  - '!shouldBeIgnored1'
 plugins:
-    - typescript-operations
-    - typescript-react-apollo
+  - typescript-operations
+  - typescript-react-apollo
 respectGitIgnore: true
 config:
-    reactApolloVersion: 3
-    apolloReactComponentsImportFrom: "@apollo/client/react/components"
-    useIndexSignature: true
+  reactApolloVersion: 3
+  apolloReactComponentsImportFrom: '@apollo/client/react/components'
+  useIndexSignature: true
 cacheDir: .cache
 TSConfigFile: tsconfig.compile.json
 typeInjectEntrypoint: typings/graphql-let.d.ts
 ```
 
 ### Limitations of `graphql-let/babel`
 
--   **Sadly**, type injection can't be done with TaggedTemplateExpression such
-    as `` gql`query {}` ``. This is the limitation of TypeScript.
-    [Please answer me if you have any ideas.](https://stackoverflow.com/questions/61917066/can-taggedtempalte-have-overload-signatures-with-a-certain-string-literal-argume)
--   Fragments are still not available. Please watch
-    [the issue.](https://github.com/piglovesyou/graphql-let/issues/65)
+- **Sadly**, type injection can't be done with TaggedTemplateExpression such
+  as `` gql`query {}` ``. This is the limitation of TypeScript.
+  [Please answer me if you have any ideas.](https://stackoverflow.com/questions/61917066/can-taggedtempalte-have-overload-signatures-with-a-certain-string-literal-argume)
+- Fragments are still not available. Please watch
+  [the issue.](https://github.com/piglovesyou/graphql-let/issues/65)
 
 ## Jest Transformer
 
@@ -582,10 +592,10 @@ schema. Just use what you need; it's most likely to be `jest-transform-graphql`.
 
 If you meet the following conditions, graphql-let generates Resolver Types.
 
--   You have file paths including glob patterns in `schema`
--   You have
-    [`@graphql-codegen/typescript-resolvers`](https://graphql-code-generator.com/docs/plugins/typescript-resolvers)
-    installed
+- You have file paths including glob patterns in `schema`
+- You have
+  [`@graphql-codegen/typescript-resolvers`](https://graphql-code-generator.com/docs/plugins/typescript-resolvers)
+  installed
 
 Run:
 
@@ -686,8 +696,8 @@ Define your fragment named as `partial.graphql`
 
 ```graphql
 fragment Partial on User {
-    id
-    name
+  id
+  name
 }
 ```
 
@@ -696,9 +706,9 @@ and import it.
 ```graphql
 # import Partial from './partial.graphql'
 query Viewer {
-    viewer {
-        ...Partial
-    }
+  viewer {
+    ...Partial
+  }
 }
 ```
 
@@ -714,14 +724,14 @@ You're seeing the `*2`. It's used to skip `*1` and `*3`, and recodnized as gener
 
 ## Contribution
 
--   **[Create an issue](https://github.com/piglovesyou/graphql-let/issues/new)**
-    if you have ideas, find a bug, or anything.
--   **Creating a PR** is always welcome!
-    -   Running `npm run prepublishOnly` locally will get your local development
-        ready.
-    -   Adding tests is preferable, but not necessary. Maybe someone else will
-        fill it.
--   [We have a chronic accumulation of dependabot PRs](https://github.com/piglovesyou/graphql-let/pulls/app%2Fdependabot). Please help us fix these version conflicts by cloning the dependabot branches.
+- **[Create an issue](https://github.com/piglovesyou/graphql-let/issues/new)**
+  if you have ideas, find a bug, or anything.
+- **Creating a PR** is always welcome!
+  - Running `yarn run prepack` locally will get your local development
+    ready.
+  - Adding tests is preferable, but not necessary. Maybe someone else will
+    fill it.
+- [We have a chronic accumulation of dependabot PRs](https://github.com/piglovesyou/graphql-let/pulls/app%2Fdependabot). Please help us fix these version conflicts by cloning the dependabot branches.
 
 ## License
 

src/__fixtures/jestTransformerCustomPaths/subdir/.graphql-let.yml

@@ -0,0 +1,7 @@
+schema: ./schema/type-defs.graphqls
+documents: "**/*.graphql"
+plugins:
+    - typescript-operations
+    - typescript-react-apollo
+respectGitIgnore: true
+cacheDir: ../.cache

src/__fixtures/jestTransformerCustomPaths/subdir/babel.config.json

@@ -0,0 +1,7 @@
+{
+  presets: [
+    '@babel/preset-env',
+    '@babel/preset-typescript',
+    '@babel/preset-react',
+  ],
+}

src/__fixtures/jestTransformerCustomPaths/subdir/pages/viewer.graphql

@@ -0,0 +1,7 @@
+query Viewer {
+    viewer {
+        id
+        name
+        status
+    }
+}

src/__fixtures/jestTransformerCustomPaths/subdir/schema/type-defs.graphqls

@@ -0,0 +1,9 @@
+type User {
+    id: ID!
+    name: String!
+    status: String!
+}
+
+type Query {
+    viewer: User
+}

src/__fixtures/loader/monorepo/config/.graphql-let.yml

@@ -1,7 +1,8 @@
-schema: ../../packages/schema/type-defs.graphqls
-documents: "**/*.graphql"
+schema: ../schema/type-defs.graphqls
+documents: '**/*.graphql'
 plugins:
-    - typescript-operations
-    - typescript-react-apollo
+  - typescript-operations
+  - typescript-react-apollo
 respectGitIgnore: true
+cwd: ../packages/app
 cacheDir: .cache

src/__snapshots__/jestTransformer.test.ts.snap

@@ -60,3 +60,64 @@ function useViewerLazyQuery(baseOptions) {
   return Apollo.useLazyQuery(ViewerDocument, options);
 }"
 `;
+
+exports[`graphql-let/jestTransformer transforms .graphql when custom configFile and cache dirs set 1`] = `
+"\\"use strict\\";
+
+function _typeof(obj) { \\"@babel/helpers - typeof\\"; if (typeof Symbol === \\"function\\" && typeof Symbol.iterator === \\"symbol\\") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === \\"function\\" && obj.constructor === Symbol && obj !== Symbol.prototype ? \\"symbol\\" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, \\"__esModule\\", {
+  value: true
+});
+exports.useViewerQuery = useViewerQuery;
+exports.useViewerLazyQuery = useViewerLazyQuery;
+exports.ViewerDocument = void 0;
+
+var Apollo = _interopRequireWildcard(require(\\"@apollo/client\\"));
+
+var _templateObject;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== \\"function\\") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== \\"object\\" && typeof obj !== \\"function\\") { return { \\"default\\": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== \\"default\\" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj[\\"default\\"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var defaultOptions = {};
+var ViewerDocument = (0, Apollo.gql)(_templateObject || (_templateObject = _taggedTemplateLiteral([\\"\\\\n    query Viewer {\\\\n  viewer {\\\\n    id\\\\n    name\\\\n    status\\\\n  }\\\\n}\\\\n    \\"])));
+/**
+ * __useViewerQuery__
+ *
+ * To run a query within a React component, call \`useViewerQuery\` and pass it any options that fit your needs.
+ * When your component renders, \`useViewerQuery\` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useViewerQuery({
+ *   variables: {
+ *   },
+ * });
+ */
+
+exports.ViewerDocument = ViewerDocument;
+
+function useViewerQuery(baseOptions) {
+  var options = _objectSpread(_objectSpread({}, defaultOptions), baseOptions);
+
+  return Apollo.useQuery(ViewerDocument, options);
+}
+
+function useViewerLazyQuery(baseOptions) {
+  var options = _objectSpread(_objectSpread({}, defaultOptions), baseOptions);
+
+  return Apollo.useLazyQuery(ViewerDocument, options);
+}"
+`;

src/jestTransformer.test.ts

@@ -9,12 +9,9 @@ let cwd: string;
 let config: Config.ProjectConfig;
 
 describe('graphql-let/jestTransformer', () => {
-  beforeAll(async () => {
+  test('transforms .graphql', async () => {
     [cwd] = await prepareFixtures(__dirname, '__fixtures/jestTransformer');
     config = { rootDir: cwd } as Config.ProjectConfig;
-  });
-
-  test('transforms .graphql', async () => {
     const fileName = 'pages/viewer.graphql';
     const stats = await compiler(cwd, [fileName], 'node');
     const { 0: fileData } = stats
@@ -30,6 +27,44 @@ describe('graphql-let/jestTransformer', () => {
     ) as { code: string };
     expect(removeSourcemapReference(transformedContent)).toMatchSnapshot();
   });
+
+  test('transforms .graphql when custom configFile and cache dirs set', async () => {
+    [cwd] = await prepareFixtures(
+      __dirname,
+      '__fixtures/jestTransformerCustomPaths',
+    );
+
+    // Compile the file
+    const fileName = 'pages/viewer.graphql';
+    const stats = await compiler(cwd + '/subdir', [fileName], 'node', {
+      configFile: './.graphql-let.yml',
+    });
+    const { 0: fileData } = stats
+      .toJson()
+      .modules!.map((m) => m.source)
+      .filter(Boolean);
+
+    // Run the config
+    config = {
+      rootDir: cwd,
+      transform: [
+        [
+          'filePattern',
+          'graphql-let/jestTransformer.js',
+          {
+            configFile: './subdir/.graphql-let.yml',
+          },
+        ],
+      ],
+    } as any;
+    const fullPath = join(cwd + '/subdir', fileName);
+    const { code: transformedContent } = jestTransformer.process(
+      fileData!,
+      fullPath,
+      { config } as TransformOptions<JestTransformerOptions>,
+    ) as { code: string };
+    expect(removeSourcemapReference(transformedContent)).toMatchSnapshot();
+  });
 });
 
 function removeSourcemapReference(code: string) {