How to manually initialise the server with GraphQL

[omairvaiyani]

We use Parse Server as a middleware in our express app - we're able to do this alongside manually setting the up the live query server like so:

const app = express();
const parseServer = new ParseServer({ ...serverConfig });
this.setRoute('', parseServer);

// ... other routes
// start the http server
const httpServer = http.createServer(app);
httpServer.listen(port, () => {
      console.log(`Server listening at ${this.serverUrl} in ${nodeEnv}.`);
});

// start the live query server
ParseServer.createLiveQueryServer(httpServer, { ...liveQueryServerConfig });

Our parse server config:

{
    // ... other stuff,

    mountGraphQL: true,
    mountPlayground: true

}

This does not seem to start the graphql server on its own. Digging into the source code, I can see a ParseServer instance method called start - which does not get called in the above manner. Is there a more appropriate / modern way to initialise the server that the docs are not caught up with?

[omairvaiyani]

After adjusting the initialisation code, I've now gotten closer but still blocked

// no changes to server config - still has graphql options enabled
const parseServer = ParseServer.start({ ..serverConfig });
const { expressApp } = parseServer;

// .. use expressApp to setup our custom routes

However, when we visit "http://localhost:1337/playground", we get this output:

{"error":"unauthorized"}, i.e., it's hitting the Parse Server route.

Our mountPath is root "/" . I can see that changing the mountPath to something else such as "/parse" does allow /playground to load, but we are currently reliant on running the API at root. I can also see that all our custom routes, such as "/ping.xml" are now overridden by the Parse Server and get the "unauthorized" response as above.

I could do with some guidance on this!

[douglasmuraoka]

@omairvaiyani I believe you can adjust your original code with the following code:

// there is a difference importing ParseServer this way
const { default: ParseServer, ParseGraphQLServer } = require('parse-server');

const parseServer = new ParseServer({ ...serverConfig });
const parseServerApi = parseServer.app;

app.use('/', parseServerApi); // app is your express instance

const {
  mountGraphQL,
  mountPlayground,
  graphQLPath = '/graphql',
  playgroundPath = '/playground'
} = serverConfig;
if (mountGraphQL === true || mountPlayground === true) {
  const parseGraphQLServer = new ParseGraphQLServer(parseServer, {
    graphQLPath,
    playgroundPath,
  });

  if (mountGraphQL) {
    parseGraphQLServer.applyGraphQL(app);
  }

  if (mountPlayground) {
    parseGraphQLServer.applyPlayground(app);
  }
}

[omairvaiyani]

@douglasmuraoka So in the past few hours I did unearth that there's a difference in importing the default: ParseServer and ParseGraphQLServer and effectively recreating the internal start method myself, but for some reason the "playground" route still doesn't behave unless the parse api mount path is set to anything but root: "".

GraphQL itself does run though, I can confirm by making post requests to "/graphql", but when visiting "/playground", it simply doesn't hit the route and gets consumed by the parse router.

Just to clarify - my current code is effectively identical to the pseudocode you've comment above.

[omairvaiyani]

Okay I've got it!

The parse api router must be mounted after using the playground route. Can't tell you why this is, I'll look into but I imagine its a quirk with express?

const { default: ParseServer, ParseGraphQLServer } = require('parse-server');

const parseServer = new ParseServer({ ...serverConfig });
const parseServerApi = parseServer.app;

const {
  mountGraphQL,
  mountPlayground,
  graphQLPath = '/graphql',
  playgroundPath = '/playground'
} = serverConfig;
if (mountGraphQL === true || mountPlayground === true) {
  const parseGraphQLServer = new ParseGraphQLServer(parseServer, {
    graphQLPath,
    playgroundPath,
  });

  if (mountGraphQL) {
    parseGraphQLServer.applyGraphQL(app);
  }

  if (mountPlayground) {
    parseGraphQLServer.applyPlayground(app);
  }
}

app.use('/', parseServerApi); //  <-- Moved here

[TomWFox]

@davimacedo would be good to document this in the GraphQL guide