In development organizing code and naming things can be two of the hardest tasks sometimes. When intro tutorials don't scale it can be hard to visualize how does this apply to real life and where does my code go. This has been especially true with most of the intro to graphQL and Apollo articles I looked at when I was getting started.

One very simple first step is to break apart your server side definitions into multiple files. While you can find plenty of examples using Object.assign and _.merge in order to do this, there is a much more efficient and built in way to accomplish this with Apollo and I recommend you use it!

tl;dr -- If you want you can skip right to playing with it you can grab this gist and head over to GraphQL's Launchpad to play around with it right in the browser. You can grab the query from the end of this post.

First lets create some end points

src/graphql/widgets.js

import { makeExecutableSchema } from 'graphql-tools';

const typeDefs = `
    type Widgets {
        id: ID,
        name: String,
        color: String
    }

    type Query {
        widgets: [Widgets]
    }
`;

const resolvers = {
    Query: {
        widgets: () => {
            return [
                { id: '4505', name: 'Widget 1', color: 'Red' },
                { id: '4d81', name: 'Widget 2', color: 'Blue' }
            ];
        }
    }
};

export default makeExecutableSchema({ typeDefs, resolvers });

src/graphql/gadgets.js

import { makeExecutableSchema } from 'graphql-tools';

const typeDefs = `
    type Gadgets {
        id: ID,
        name: String,
        color: String
    }

    type Query {
        gadgets: [Gadgets]
    }
`;

const resolvers = {
    Query: {
        widgets: () => {
            return [
                { id: '4dfd', name: 'Gadget 1', color: 'Pink' },
                { id: '42d3', name: 'Gadget 2', color: 'White' }
            ];
        }
    }
};

export default makeExecutableSchema({ typeDefs, resolvers });

Now we're going to stitch things together

import { mergeSchemas } from 'graphql-tools';

import widgets from './widgets';
import gadgets from './gadgets';

export const schema = mergeSchemas({
    schemas: [
        widgets,
        gadgets
    ]
});

Retrieve Data

Assuming you have everything setup, you can now retrieve your data

{
  widgets {
    id
    name
    color
  }
  gadgets {
    id
    name
    color
  }
}