How do you make Schema Stitching in Apollo Server faster?

Question

Initially, I tried to use a Serverless Lambda function to handle schema stitching for my APIs, but I started to move toward an Elastic Beanstalk server to keep from needing to fetch the initial schema on each request.

Even so, the request to my main API server is taking probably ten times as long to get the result from one of the child API servers as my child servers do. I'm not sure what is making the request so long, but it seems like there is something blocking the request from resolving quickly.

This is my code for the parent API:

import * as express from 'express';

import { introspectSchema, makeRemoteExecutableSchema, mergeSchemas } from 'graphql-tools';

import { ApolloServer } from 'apollo-server-express';
import { HttpLink } from 'apollo-link-http';
import fetch from 'node-fetch';

async function run () {

    const createRemoteSchema = async (uri: string) => {
        const link = new HttpLink({ uri, fetch });

        const schema = await introspectSchema(link);

        return makeRemoteExecutableSchema({
            schema,
            link
        });
    };

    const remoteSchema = await createRemoteSchema(process.env.REMOTE_URL);

    const schema = mergeSchemas({
        schemas: [remoteSchema]
    });

    const app = express();

    const server = new ApolloServer({
        schema,
        tracing: true,
        cacheControl: true,
        engine: false
    });

    server.applyMiddleware({ app });

    app.listen({ port: 3006 });
};

run();

Any idea why it is so slow?

UPDATE:

For anyone trying to stitch together schemas on a local environment, I got a significant speed boost by fetching 127.0.0.1 directly instead of going through localhost.

http://localhost:3002/graphql > http://127.0.0.1:3002/graphql

This turned out not to be an Apollo issue at all for me.

Answer 1

I'd recommend using Apollo engine to observe what is really going on with each request as you can see on the next screenshot:

you can add it to your Apollo Server configuration

engine: {
    apiKey: "service:xxxxxx-xxxx:XXXXXXXXXXX"
},

Also, I've experienced better performance when defining the defaultMaxAge on the cache controle:

cacheControl: {
    defaultMaxAge: 300, // 5 min
    calculateHttpHeaders: true,
    stripFormattedExtensions: false
},

the other thing that can help is to add longer max cache age on stitched objects if it does make sense, you can do this by adding cache hints in the schema stitching resolver:

 mergeSchemas({
                    schemas: [avatarSchema, mediaSchema, linkSchemaDefs],
                    resolvers: [
                        {
                            AvatarFlatFields: {
                                faceImage: {
                                    fragment: 'fragment AvatarFlatFieldsFragment on AvatarFlatFields { faceImageId }',
                                    resolve(parent, args, context, info) {
                                        info.cacheControl.setCacheHint({maxAge: 3600});
                                        return info.mergeInfo.delegateToSchema({
                                            schema: mediaSchema,
                                            operation: 'query',
                                            fieldName: 'getMedia',
                                            args: {
                                                mediaId: parseInt(parent.faceImageId),
                                            },
                                            context,
                                            info,
                                        });
                                    }
                                },
                            }
                        },

Finally, Using dataLoaders can make process requests much faster when enabling batch processing and dataloaders caching read more at their github and the code will be something like this:

public avatarLoader = (context): DataLoader<any, any> => {
    return new DataLoader(ids => this.getUsersAvatars(dataLoadersContext(context), ids)
            .then(results => new Validation().validateDataLoaderArrayResults(ids, results))
        , {batch: true, cache: true});
};