Key argument for @connection directive doesn't accept dynamic variables

[peirisyasara]

Issue Description

I am trying to pass a key for caching to the query by passing a variable to the key argument for the @connection directive in Apollo Client.

My apollo-client version is 3.7.1

I am trying to implement something similar to the below code segment. I found this in the apollo client official documentation (https://www.apollographql.com/docs/react/pagination/key-args/#the-connection-directive)

const FEED_QUERY = gql`
  query Feed($offset: Int, $limit: Int, $feedKey: String) {
    feed(offset: $offset, limit: $limit) @connection(key: $feedKey) {
      edges {
        node { ... }
      }
      pageInfo {
        endCursor
        hasNextPage
      }
    }
  }
`;

Link to Reproduction

https://codesandbox.io/embed/nervous-cloud-43xq08?fontsize=14&hidenavigation=1&theme=dark

Reproduction Steps

In the code sandbox, I am trying to pass a dynamic variable to the key argument for the @connection directive in Apollo Client. It doesn't load the names. But when I passed a string constant it is working perfectly.

[dylanwulf]

Hi there, when writing in Github issues the @ symbol is used to tag other users. By writing @connection in your issue description, you have accidentally tagged the user named connection which will send them a notification. To avoid this, please wrap @connection inside backticks `like this`. Thank you!

[peirisyasara]

sure, sorry about that

[bignimbus]

I think this is a duplicate of https://discord.com/channels/1022972389463687228/1111307067312050297 - we'll triage this a bit further in Discord for the time being.