feat(relay-optimizer-plugin): also transform fragments (in order to have valid documents during runtime)

BREAKING CHANGE: graphql-codegen >= 1.6.1 requires now the `skipDocumentsValidation` config option being set to `true`. Documents will still be validted by relay-compiler.

Author: n1ru4l

packages/graphql-codegen-relay-optimizer-plugin/README.md

@@ -28,9 +28,11 @@ schema: schema.graphql
 generates:
   src/generated-types.tsx:
     documents: "src/documents/**/*.graphql"
+    config:
+      skipDocumentsValidation: true
     plugins:
-      - "typescript"
       - "@n1ru4l/graphql-codegen-relay-optimizer-plugin"
+      - "typescript"
       - "typescript-operations"
       - "typescript-react-apollo"
 ```

packages/graphql-codegen-relay-optimizer-plugin/src/index.ts

@@ -47,6 +47,11 @@ export const plugin: PluginFunction<RelayOptimizerPluginConfig> = (
   ).addAll(relayDocuments);
 
   const fragmentDocuments = fragmentCompilerContext
+    .applyTransforms([
+      RelayApplyFragmentArgumentTransform.transform,
+      FlattenTransform.transformWithOptions({ flattenAbstractTypes: false }),
+      SkipRedundantNodesTransform.transform
+    ])
     .documents()
     .filter(doc => doc.kind === "Fragment");
 

packages/todo-app-example/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "react-app"
+}

packages/todo-app-example/codegen.yml

@@ -4,11 +4,12 @@ generates:
   src/generated-types.tsx:
     documents: "src/**/*.graphql"
     config:
+      skipDocumentsValidation: true
       withHOC: false
       withComponent: false
       withHooks: true
     plugins:
-      - "typescript"
       - "@n1ru4l/graphql-codegen-relay-optimizer-plugin"
+      - "typescript"
       - "typescript-operations"
       - "typescript-react-apollo"

packages/todo-app-example/package.json

@@ -47,12 +47,12 @@
   "devDependencies": {
     "@babel/node": "7.6.1",
     "@babel/preset-flow": "7.0.0",
-    "@graphql-codegen/cli": "1.7.0",
-    "@graphql-codegen/plugin-helpers": "1.7.0",
-    "@graphql-codegen/typescript": "1.7.0",
-    "@graphql-codegen/typescript-operations": "1.7.0",
-    "@graphql-codegen/typescript-react-apollo": "1.7.0",
-    "@n1ru4l/graphql-codegen-relay-optimizer-plugin": "3.0.0",
+    "@graphql-codegen/cli": "1.7.1-alpha-b651f2ce.56",
+    "@graphql-codegen/plugin-helpers": "1.7.1-alpha-b651f2ce.56",
+    "@graphql-codegen/typescript": "1.7.1-alpha-b651f2ce.56",
+    "@graphql-codegen/typescript-operations": "1.7.1-alpha-b651f2ce.56",
+    "@graphql-codegen/typescript-react-apollo": "1.7.1-alpha-b651f2ce.56",
+    "@n1ru4l/graphql-codegen-relay-optimizer-plugin": "3.1.0",
     "@types/classnames": "2.2.9",
     "@types/jest": "24.0.18",
     "@types/node": "12.7.5",

packages/todo-app-example/src/components/TodoListFooter_user.fragment.graphql

@@ -1,10 +1,9 @@
-fragment TodoListFooter_user on User {
+fragment TodoListFooter_user on User
+  @argumentDefinitions(first: { type: "Int", defaultValue: 2147483647 }) {
   id
   userId
   completedCount
-  todos(
-    first: 2147483647 # max GraphQLInt
-  ) @connection(key: "TodoList_todos") {
+  todos(first: $first) @connection(key: "TodoList_todos") {
     edges {
       node {
         id

packages/todo-app-example/src/generated-types.tsx

@@ -468,6 +468,22 @@ export const AppQueryDocument = gql`
   }
 `;
 
+/**
+ * __useAppQueryQuery__
+ *
+ * To run a query within a React component, call `useAppQueryQuery` and pass it any options that fit your needs.
+ * When your component renders, `useAppQueryQuery` 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 } = useAppQueryQuery({
+ *   variables: {
+ *      userId: // value for 'userId'
+ *   },
+ * });
+ */
 export function useAppQueryQuery(
   baseOptions?: ApolloReactHooks.QueryHookOptions<
     AppQueryQuery,
@@ -490,8 +506,10 @@ export function useAppQueryLazyQuery(
     baseOptions
   );
 }
-
 export type AppQueryQueryHookResult = ReturnType<typeof useAppQueryQuery>;
+export type AppQueryLazyQueryHookResult = ReturnType<
+  typeof useAppQueryLazyQuery
+>;
 export type AppQueryQueryResult = ApolloReactCommon.QueryResult<
   AppQueryQuery,
   AppQueryQueryVariables
@@ -520,6 +538,23 @@ export type AddTodoMutationMutationFn = ApolloReactCommon.MutationFunction<
   AddTodoMutationMutationVariables
 >;
 
+/**
+ * __useAddTodoMutationMutation__
+ *
+ * To run a mutation, you first call `useAddTodoMutationMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useAddTodoMutationMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [addTodoMutationMutation, { data, loading, error }] = useAddTodoMutationMutation({
+ *   variables: {
+ *      input: // value for 'input'
+ *   },
+ * });
+ */
 export function useAddTodoMutationMutation(
   baseOptions?: ApolloReactHooks.MutationHookOptions<
     AddTodoMutationMutation,
@@ -560,6 +595,23 @@ export type ChangeTodoStatusMutationMutationFn = ApolloReactCommon.MutationFunct
   ChangeTodoStatusMutationMutationVariables
 >;
 
+/**
+ * __useChangeTodoStatusMutationMutation__
+ *
+ * To run a mutation, you first call `useChangeTodoStatusMutationMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useChangeTodoStatusMutationMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [changeTodoStatusMutationMutation, { data, loading, error }] = useChangeTodoStatusMutationMutation({
+ *   variables: {
+ *      input: // value for 'input'
+ *   },
+ * });
+ */
 export function useChangeTodoStatusMutationMutation(
   baseOptions?: ApolloReactHooks.MutationHookOptions<
     ChangeTodoStatusMutationMutation,
@@ -600,6 +652,23 @@ export type MarkAllTodosMutationMutationFn = ApolloReactCommon.MutationFunction<
   MarkAllTodosMutationMutationVariables
 >;
 
+/**
+ * __useMarkAllTodosMutationMutation__
+ *
+ * To run a mutation, you first call `useMarkAllTodosMutationMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useMarkAllTodosMutationMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [markAllTodosMutationMutation, { data, loading, error }] = useMarkAllTodosMutationMutation({
+ *   variables: {
+ *      input: // value for 'input'
+ *   },
+ * });
+ */
 export function useMarkAllTodosMutationMutation(
   baseOptions?: ApolloReactHooks.MutationHookOptions<
     MarkAllTodosMutationMutation,
@@ -638,6 +707,23 @@ export type RemoveCompletedTodosMutationMutationFn = ApolloReactCommon.MutationF
   RemoveCompletedTodosMutationMutationVariables
 >;
 
+/**
+ * __useRemoveCompletedTodosMutationMutation__
+ *
+ * To run a mutation, you first call `useRemoveCompletedTodosMutationMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useRemoveCompletedTodosMutationMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [removeCompletedTodosMutationMutation, { data, loading, error }] = useRemoveCompletedTodosMutationMutation({
+ *   variables: {
+ *      input: // value for 'input'
+ *   },
+ * });
+ */
 export function useRemoveCompletedTodosMutationMutation(
   baseOptions?: ApolloReactHooks.MutationHookOptions<
     RemoveCompletedTodosMutationMutation,
@@ -676,6 +762,23 @@ export type RemoveTodoMutationMutationFn = ApolloReactCommon.MutationFunction<
   RemoveTodoMutationMutationVariables
 >;
 
+/**
+ * __useRemoveTodoMutationMutation__
+ *
+ * To run a mutation, you first call `useRemoveTodoMutationMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useRemoveTodoMutationMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [removeTodoMutationMutation, { data, loading, error }] = useRemoveTodoMutationMutation({
+ *   variables: {
+ *      input: // value for 'input'
+ *   },
+ * });
+ */
 export function useRemoveTodoMutationMutation(
   baseOptions?: ApolloReactHooks.MutationHookOptions<
     RemoveTodoMutationMutation,
@@ -712,6 +815,23 @@ export type RenameTodoMutationMutationFn = ApolloReactCommon.MutationFunction<
   RenameTodoMutationMutationVariables
 >;
 
+/**
+ * __useRenameTodoMutationMutation__
+ *
+ * To run a mutation, you first call `useRenameTodoMutationMutation` within a React component and pass it any options that fit your needs.
+ * When your component renders, `useRenameTodoMutationMutation` returns a tuple that includes:
+ * - A mutate function that you can call at any time to execute the mutation
+ * - An object with fields that represent the current status of the mutation's execution
+ *
+ * @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
+ *
+ * @example
+ * const [renameTodoMutationMutation, { data, loading, error }] = useRenameTodoMutationMutation({
+ *   variables: {
+ *      input: // value for 'input'
+ *   },
+ * });
+ */
 export function useRenameTodoMutationMutation(
   baseOptions?: ApolloReactHooks.MutationHookOptions<
     RenameTodoMutationMutation,