Bug: Unable to load any pages of the application

[adavis]

What's happening

• I run yarn dev and then navigate to the URL
• Immediately the error happens, nothing loads

Stacktrace

ERROR : _document-logger
message: Cannot read properties of undefined (reading 'value')
page path: /
stack trace: TypeError: Cannot read properties of undefined (reading 'value')
    at /Users/adavis/dev/build-meetup/packages/web-next/packages/web/node_modules/apollo-augmented-hooks/lib/helpers/fieldNames.js:39:197
    at Array.reduce (<anonymous>)
    at buildFieldName (/Users/adavis/dev/build-meetup/packages/web-next/packages/web/node_modules/apollo-augmented-hooks/lib/helpers/fieldNames.js:36:34)
    at /Users/adavis/dev/build-meetup/packages/web-next/packages/web/node_modules/apollo-augmented-hooks/lib/helpers/reducedQueries.js:181:52
    at Array.reduce (<anonymous>)
    at makeReducedQueryAst (/Users/adavis/dev/build-meetup/packages/web-next/packages/web/node_modules/apollo-augmented-hooks/lib/helpers/reducedQueries.js:178:68)
    at getQueryAst (/Users/adavis/dev/build-meetup/packages/web-next/packages/web/node_modules/apollo-augmented-hooks/lib/hooks/useReducedQuery.js:35:158)
    at /Users/adavis/dev/build-meetup/packages/web-next/packages/web/node_modules/apollo-augmented-hooks/lib/hooks/useReducedQuery.js:46:12
    at useReducer (/Users/adavis/dev/build-meetup/packages/web-next/packages/web/node_modules/react-dom/cjs/react-dom-server.node.development.js:1537:57)
    at Object.useState (/Users/adavis/dev/build-meetup/packages/web-next/packages/web/node_modules/react-dom/cjs/react-dom-server.node.development.js:1475:10)

[mindnektar]

Hi! There seems to be a problem with how the package is trying to handle the variables in your graphql query. Would you mind sharing the query that is being used on the crashing page so I can investigate?

[adavis]

I think it's because we use fragments. I feel like I remember reading they're not supported.

Here's an example query:

query getNextUpcomingEvent {
  self {
    id
    upcomingEvent: tickets(
      input: { first: 1 }
      filter: { happening: Future }
      sort: ASC
    ) {
      edges {
        cursor
        node {
          ...SelfTicketDetails
        }
      }
      pageInfo {
        hasNextPage
      }
    }
  }
}

Is it possible to ignore queries with fragments?

[mindnektar]

There was actually an issue with nested inline variables. I've just published a fix in v3.0.1.

As for fragments: You are right in that they are not supported by the query reduction functionality (you've read about it here at the bottom) but I've just written a unit test that demonstrates that they are safe to use. They will simply be kept in the query as is, so fields hidden behind fragments will always be requested from the server, no matter if they are present in the cache. My personal very subjective preference is to use template variables rather than fragments, which also work with query reduction, since the query will include all the fields directly.

If you're still having trouble, you're very welcome to reopen the ticket or create another one! You're helping me make this package more robust by providing me with use cases that I haven't come across or thought of during development, so thanks for that. :)

[adavis]

Thanks that seemed to fix the one crash, but now another crash is presenting the same outcome. The app doesn't load. It's also related to using reduced queries.

error - TypeError: Cannot read properties of undefined (reading 'some')
ERROR : _document-logger
message: Cannot read properties of undefined (reading 'some')
page path: /notifications/
stack trace: TypeError: Cannot read properties of undefined (reading 'some')
    at /Users/adavis/dev/build-meetup/packages/web-next/packages/web/node_modules/apollo-augmented-hooks/lib/helpers/reducedQueries.js:152:53
    at Array.some (<anonymous>)
    at hasVariable (/Users/adavis/dev/build-meetup/packages/web-next/packages/web/node_modules/apollo-augmented-hooks/lib/helpers/reducedQueries.js:151:104)
    at /Users/adavis/dev/build-meetup/packages/web-next/packages/web/node_modules/apollo-augmented-hooks/lib/helpers/reducedQueries.js:166:36
    at Array.some (<anonymous>)
    at hasVariable (/Users/adavis/dev/build-meetup/packages/web-next/packages/web/node_modules/apollo-augmented-hooks/lib/helpers/reducedQueries.js:151:104)
    at /Users/adavis/dev/build-meetup/packages/web-next/packages/web/node_modules/apollo-augmented-hooks/lib/helpers/reducedQueries.js:214:16
    at Array.filter (<anonymous>)
    at makeReducedQueryAst (/Users/adavis/dev/build-meetup/packages/web-next/packages/web/node_modules/apollo-augmented-hooks/lib/helpers/reducedQueries.js:212:59)
    at getQueryAst (/Users/adavis/dev/build-meetup/packages/web-next/packages/web/node_modules/apollo-augmented-hooks/lib/hooks/useReducedQuery.js:35:158)
error - TypeError: Cannot read properties of undefined (reading 'some')

[mindnektar]

Yep, that was another unhandled use case of fragments in combination with variables. Wrote a test and fixed it in v3.0.2.

[adavis]

Let me know if you'd prefer new tickets for reach issue. I don't mind creating new ones.

Here's what's happening now. Let's say I have a query like this:

query getSelfActiveGroups($endCursor: String, $first: Int) {
  self {
    id
    memberships(
      sort: { sortOrder: DESC }
      input: { first: $first, after: $endCursor }
    ) {
      edges {
        node {
          id
          name
        }
      }
    }
  }
}

The reduced query that's generated is like this:

query __REDUCED__getSelfActiveGroups {
  self {
    id
    memberships(
      sort: {sortOrder: DESC}
      input: {first: $first, after: $endCursor}
    ) {
      edges {
        node {
          id
          name
          link
          __typename
        }
        __typename
      }
      __typename
    }
    __typename
  }
}

But this then returns a validation failure:

{
  "errors": [
    {
      "message": "Variable \"$first\" is not defined by operation \"__REDUCED__getSelfActiveGroups\".",
      "locations": [
        {
          "line": 7,
          "column": 22
        },
        {
          "line": 1,
          "column": 1
        }
      ],
      "extensions": {
        "code": "GRAPHQL_VALIDATION_FAILED",
        "exception": {
          "stacktrace": [
            "GraphQLError: Variable \"$first\" is not defined by operation \"__REDUCED__getSelfActiveGroups\".",
            "    at Object.leave (/Users/adavis/dev/build-meetup/node_modules/graphql/validation/rules/NoUndefinedVariablesRule.js:32:33)",
            "    at Object.leave (/Users/adavis/dev/build-meetup/node_modules/graphql/language/visitor.js:344:29)",
            "    at Object.leave (/Users/adavis/dev/build-meetup/node_modules/graphql/utilities/TypeInfo.js:390:21)",
            "    at visit (/Users/adavis/dev/build-meetup/node_modules/graphql/language/visitor.js:243:26)",
            "    at Object.validate (/Users/adavis/dev/build-meetup/node_modules/graphql/validation/validate.js:69:24)",
            "    at validate (/Users/adavis/dev/build-meetup/node_modules/apollo-server-core/dist/requestPipeline.js:233:34)",
            "    at Object.<anonymous> (/Users/adavis/dev/build-meetup/node_modules/apollo-server-core/dist/requestPipeline.js:119:42)",
            "    at Generator.next (<anonymous>)",
            "    at fulfilled (/Users/adavis/dev/build-meetup/node_modules/apollo-server-core/dist/requestPipeline.js:5:58)",
            "    at processTicksAndRejections (internal/process/task_queues.js:95:5)"
          ]
        }
      }
    },
    {
      "message": "Variable \"$endCursor\" is not defined by operation \"__REDUCED__getSelfActiveGroups\".",
      "locations": [
        {
          "line": 7,
          "column": 37
        },
        {
          "line": 1,
          "column": 1
        }
      ],
      "extensions": {
        "code": "GRAPHQL_VALIDATION_FAILED",
        "exception": {
          "stacktrace": [
            "GraphQLError: Variable \"$endCursor\" is not defined by operation \"__REDUCED__getSelfActiveGroups\".",
            "    at Object.leave (/Users/adavis/dev/build-meetup/node_modules/graphql/validation/rules/NoUndefinedVariablesRule.js:32:33)",
            "    at Object.leave (/Users/adavis/dev/build-meetup/node_modules/graphql/language/visitor.js:344:29)",
            "    at Object.leave (/Users/adavis/dev/build-meetup/node_modules/graphql/utilities/TypeInfo.js:390:21)",
            "    at visit (/Users/adavis/dev/build-meetup/node_modules/graphql/language/visitor.js:243:26)",
            "    at Object.validate (/Users/adavis/dev/build-meetup/node_modules/graphql/validation/validate.js:69:24)",
            "    at validate (/Users/adavis/dev/build-meetup/node_modules/apollo-server-core/dist/requestPipeline.js:233:34)",
            "    at Object.<anonymous> (/Users/adavis/dev/build-meetup/node_modules/apollo-server-core/dist/requestPipeline.js:119:42)",
            "    at Generator.next (<anonymous>)",
            "    at fulfilled (/Users/adavis/dev/build-meetup/node_modules/apollo-server-core/dist/requestPipeline.js:5:58)",
            "    at processTicksAndRejections (internal/process/task_queues.js:95:5)"
          ]
        }
      }
    }
  ]
}

What I believe should be generated includes the query variables, like this:

query __REDUCED__getSelfActiveGroups($endCursor: String, $first: Int) {

[mindnektar]

The part in the query reduction implementation responsible for removing unused variables was unable to handle variables used in nested objects. Another unit test, another fix in v3.0.3. Thank you for your continued patience!