How can you create custom directives in GraphQL, and what are some use cases for them?

Question

Accepted Answer

import { ApolloServer } from "@apollo/server";
import { startStandaloneServer } from "@apollo/server/standalone";

import { makeExecutableSchema } from "@graphql-tools/schema";
import { mapSchema, getDirective, MapperKind } from "@graphql-tools/utils";

const typeDefs = `#graphql
  directive @uppercase on FIELD_DEFINITION

type User {
    id: ID!
    name: String @uppercase
  }

type Query {
    user: User
  }
`;

const resolvers = {
  Query: {
    user: () => ({
      id: "1",
      name: "alice",
    }),
  },
};

// Directive transformer
function uppercaseDirectiveTransformer(schema) {
  return mapSchema(schema, {
    [MapperKind.OBJECT_FIELD]: (fieldConfig) => {
      const uppercaseDirective = getDirective(
        schema,
        fieldConfig,
        "uppercase"
      )?.[0];

if (uppercaseDirective) {
        const { resolve = defaultFieldResolver } = fieldConfig;

fieldConfig.resolve = async function (source, args, context, info) {
          const result = await resolve(source, args, context, info);

if (typeof result === "string") {
            return result.toUpperCase();
          }

return result;
        };

return fieldConfig;
      }
    },
  });
}

let schema = makeExecutableSchema({
  typeDefs,
  resolvers,
});

schema = uppercaseDirectiveTransformer(schema);

const server = new ApolloServer({ schema });

const { url } = await startStandaloneServer(server, {
  listen: { port: 4000 },
});

console.log(`Server ready at ${url}`);

How can you create custom directives in GraphQL, and what are some use cases for them?

How can you create custom directives in GraphQL, and what are some use cases for them?

Scenario Questions

Follow-up Questions