server side cacheing in graphql

I want to use GraphQL in NestJS. I'm using the first code in GraphQL. Now I want to add caching. I've set the following settings, but it's not using the cache. What's the problem? How can it be solved?

import responseCachePlugin from 'apollo-server-plugin-response-cache';

@Module({
  imports: [
    GraphQLModule.forRoot({
      driver: ApolloFederationDriver,
      autoSchemaFile: {
        federation: 2,
      },
      plugins: [responseCachePlugin({})],

      buildSchemaOptions: {
        directives: [
          new GraphQLDirective({
            name: 'cacheControl',
            locations: [
              DirectiveLocation.FIELD_DEFINITION,
              DirectiveLocation.OBJECT,
              DirectiveLocation.INTERFACE,
              DirectiveLocation.UNION,
              DirectiveLocation.QUERY,
              DirectiveLocation.FIELD,
            ],
            args: {
              maxAge: { type: GraphQLInt },
              scope: {
                type: new GraphQLEnumType({
                  name: 'CacheControlScope',
                  values: {
                    PUBLIC: { value: 'PUBLIC' },
                    PRIVATE: { value: 'PRIVATE' },
                  },
                }),
              },
              inheritMaxAge: { type: GraphQLBoolean },
            },
          }),
        ],
      },
    }),
  ],
  providers: [xResolver, xService],
})
export class xModule {}

And I want to use it in the following way.

import {
  Directive,
  Query,
  Resolver
} from '@nestjs/graphql';
import {
  userType
} from './dto/create-user.input';
import { X } from './entities/x.entity';
import { XService } from './x.service';

@Resolver(() => X)
export class xResolver {
  constructor(private readonly xService: XService) {}

  @Query(() => userType)
  @Directive('@cacheControl(maxAge: 30)')
  async user() {
    return this.xService.getUser();
  }

}

Is the problem due to the versions of the packages?