Merge Admin GraphQL schema with our own GQL endpoint

uriab · ‎05-05-2019

Hi,

I am working on the shopify app tutorial for React + Apollo + Node.js + GraphQL:

https://developers.shopify.com/tutorials/build-a-shopify-app-with-node-and-react/fetch-data-with-apo...

It seems to use graphQLProxy which "automagically" creates the graphql endpoint for the Shopify Admin API.

Now, we have our own API as well which I would like to merge with the same endpoint in order to have 1 single GQL endpoint for the entire server.

I could not find any examples on how to do this. I suppose it means we cannot use graphQLProxy anymore but I am not sure. Any guidance / help would be much appreciated!

P.S. I read about Schema Stitching and it still doesn't help since graphQLProxy hides all the schema / resolvers logic deep inside.

Thanks

uriab · ‎05-05-2019

Here is my code which includes both our own GQL endpoint as well as the Shopify Admin API GQL proxy, as stated, I would like to unify into 1 endpoint:

require('isomorphic-fetch');
const Koa = require('koa');
const next = require('next');
const { default: createShopifyAuth } = require('@shopify/koa-shopify-auth');
const dotenv = require('dotenv');
const { verifyRequest } = require('@shopify/koa-shopify-auth');
const session = require('koa-session');

dotenv.config();
const { default: graphQLProxy } = require('@shopify/koa-shopify-graphql-proxy');
const { ApiVersion } = require('@shopify/koa-shopify-graphql-proxy');
const { ApolloServer, gql } = require('apollo-server-koa');
const typeDefs = require('./gql/schema');
const resolvers = require('./gql/resolvers');
const db = require('./models');

const port = parseInt(process.env.PORT, 10) || 3000;
const dev = process.env.NODE_ENV !== 'production';
const app = next({ dev });
const handle = app.getRequestHandler();

const { SHOPIFY_API_SECRET_KEY, SHOPIFY_API_KEY } = process.env;

const graphQLServer = new ApolloServer({
    typeDefs,
    resolvers,

    // Make graphql playgroud available at /graphql
    playground: {
        endpoint: '/graphql',
    },
    bodyParser: true,
});


app.prepare().then(() => {
    const server = new Koa();
    server.use(session(server));
    server.keys = [SHOPIFY_API_SECRET_KEY];

    server.use(
        createShopifyAuth({
            apiKey: SHOPIFY_API_KEY,
            secret: SHOPIFY_API_SECRET_KEY,
            scopes: ['read_products', 'write_products'],
            afterAuth(ctx) {
                const { shop, accessToken } = ctx.session;
                ctx.cookies.set('shopOrigin', shop, { httpOnly: false });
                ctx.redirect('/');
            },
        }),
    );

    graphQLServer.applyMiddleware({
        app: server,
    });

    server.use(graphQLProxy({ version: ApiVersion.April19 }));
    server.use(verifyRequest());
    server.use(async (ctx) => {
        await handle(ctx.req, ctx.res);
        ctx.respond = false;
        ctx.res.statusCode = 200;
    });

    server.listen(port, () => {
        console.log(`> Ready on http://localhost:${port}`);
    });
});

dhachok · ‎12-10-2019

@uriab did you find a way to make it works?

artva · ‎12-10-2019

No, we ended up splitting it