RootQuery Resolve: calls a service in a separate js file - graphql

Question

I am OK with javascript but I am very new to GraphQL. I currently have this GraphQL structure and it is working. I found examples online for how to get different types organized into SRP files. I am however unable to find how to do this with the resolve: as it requires a function.
GraphQL:
const RootQueryType = new GraphQLObjectType({
name: 'RootQueryType',
fields: {
ownerData: {
type: OwnerType,
description: 'Get all owners',
args:{key: {type: GraphQLString} },
resolve: (obj, args) => {
const url = 'http://localhost:5001/api/.../' + args.key
return fetch(url)
.then(response => {
return response.json()
})
.then(json => {
return transform(json)
})
.catch(err => {
console.trace(err)
})
}
},
carData: {
type: carType,
description: 'Get owned vehicles',
args:{key: {type: GraphQLString} },
resolve: (obj, args) => {
const url = 'http://localhost:6001/api/.../' + args.key
return fetch(url)
.then(response => {
return response.json()
})
.then(json => {
return transform(json)
})
.catch(err => {
console.trace(err)
})
}
},
}
})
I can move the service calls into separate files but not sure how to structure the resolve as it needs a function.
Would it be something like this:
const VehicleService = require('./ExternalServices/Vehicles');
.....snip...
resolve: (obj, args) => { VehicleService.GetVehicles() }

Answer 1

Generally speaking, I've found the best way to keep my code organized is to put all of the business logic elsewhere, initialized into the context object. If you're using graphql-js directly (it'll be set up differently if you're using something like apollo-server, but the context is still the right place for this):
graphql.js excerpt
(dataloaders is the SRP logic here)
const { graphql } = require('graphql');
const dataloaders = require('./dataloaders');
const typeDefs = require('./type-definitions')
const schema = require('./schema')
exports.query = (whatever, args) => {
const context = {};
context.requestId = 'uuid-something';
context.loaders = dataloaders.initialize({ context });
return graphql(schema, query, null, context)
}
schema.js excerpt
const RootQueryType = new GraphQLObjectType({
name: 'RootQueryType',
fields: {
ownerData: {
type: OwnerType,
description: 'Get all owners',
args:{key: {type: GraphQLString} },
resolve: (obj, args, context) => {
const key = args.key;
return context.loaders.owner({ key });
}
}
}
});
dataloaders.js excerpt
exports.initialize = ({ context }) => {
return {
owner({ key }) {
const url = 'http://localhost:6001/api/.../' + key
return fetch(url, { headers: { requestId: context.requestId }})
.then(response => {
return response.json()
})
.then(json => {
return transform(json)
})
.catch(err => {
console.trace(err)
});
}
}
};
In addition to better code organization, doing it this way allows for easier testing, since your resolvers don't need any external dependencies. You can inject your dependencies this way by preloading the context with whatever you want for testing, and you can handle business logic where business logic belongs.
Initializing your business logic with the context of the request also allows you to adjust functionality based off the request: requestId (as I've shown), access control, etc.

Answer 2

The syntax () => {} is simply a function definition. The resolve field expects a function definition so it can run it when the field must be resolved.
You can move the resolving function to a different file like so:
car-data-resolve.js:
const resolveCarData = (obj, args) => {
const url = 'http://localhost:6001/api/.../' + args.key
return fetch(url)
.then(response => {
return response.json()
})
.then(json => {
return transform(json)
})
.catch(err => {
console.trace(err)
})
}
export default resolveCarData;
And then use it in your schema definition:
import resolveCarData from './car-data-resolve';
const RootQueryType = new GraphQLObjectType({
name: 'RootQueryType',
fields: {
/* Other fields */
carData: {
type: carType,
description: 'Get owned vehicles',
args: { key: { type: GraphQLString } },
resolve: resolveCarData
},
},
});