Apollo graphql: makeExecutableSchema & playground - graphql

Im a beginner trying to set up a graphql API with apollo-express and prisma
All was going well, but than I decided to use this library to add input validation:
graphql-constraint-directive
It requires me to use makeExecutableSchema to build my schema so I can use the schemaDirectives param
My code to start the server was like this:
const server = new ApolloServer({
typeDefs,
resolvers,
context: ({req}) => {
const userId = getUserID(req);
return {
userId,
prisma
}
}
});
And all was working perfectly
But to use that lib I had it refactored it like this:
const schema = makeExecutableSchema({
typeDefs,
resolvers,
schemaDirectives: {constraint: ConstraintDirective}
});
const server = new ApolloServer({
schema,
context: ({req}) => {
const userId = getUserID(req);
return {
userId,
prisma
}
}
});
And it works too, all my queries and mutations are working, and the validation too.
But it broke the graphql-playground: its no longer able to load my schema and docs, both tabs are empty. And it displays the following error:
Server cannot be reached
It still works: Im able to send my querys and mutations and all, but I no longer have code completion and the auto docs, since it doenst knows my schema, and so is no longer as useful
If I replace the executable schema for the pure typeDefs ans resolvers, than it works alright again, playground loads everything again
Am I supposed to do something different when using makeExecutableSchema, for playgroun to work?

Whether you use makeExecutableSchema or pass the typeDefs and resolvers to the ApolloServer constructor directly shouldn't matter -- Apollo Server uses makeExecutableSchema under the hood anyway. In fact, you can just pass the directive map to the constructor directly:
const server = new ApolloServer({
typeDefs,
resolvers,
schemaDirectives: {constraint: ConstraintDirective}
context: ({req}) => {
const userId = getUserID(req);
return {
userId,
prisma
}
}
});
This is a bug with the library you're using. The directive replaces the built-in scalars with custom ones, but doesn't actually add those custom scalars to the schema. When Playground tries to introspect the schema, it can't find the custom scalars in the introspection results and errors out. I would avoid that particular library -- it doesn't look like it's actively maintained.

Related

Is it possible to query my running apollo graphqlserver locally, without using http?

I'm running a Graphql server from Apollo, and the objective is fetch some data. However, I need this data locally - on the same server. Is that possible, or is the only way to query the Apollo server using http?
I know that I could possible accomplish this without using GraphQl, and just access the data layer, but the thing is that I would like to benefit from:
Authorization
Dataloaders
Already built-in optimization in our Graphql Api
I already have a working solution where I just use node-fetch to query localhost, but it seems like quite a bit of overhead.
Yes it is possible!
Apollo makes the schema building and execution for you, but you can also do it yourself.
Here is a mini example based on the apollo-server-express package. I create the schema and then give it to the apollo-server. Look below the server startup, I also create a query-string, then parse it and execute it without apollo and without an http request.
const express = require('express');
const { ApolloServer, gql, makeExecutableSchema } = require('apollo-server-express');
const { parse } = require('graphql/language')
const { execute } = require('graphql')
// Construct a schema, using GraphQL schema language
const typeDefs = gql`
type Query {
hello: String
}
`;
// Provide resolver functions for your schema fields
const resolvers = {
Query: {
hello: () => 'Hello world!',
},
};
const schema = makeExecutableSchema({
typeDefs,
resolvers,
})
async function startApolloServer() {
const server = new ApolloServer({ schema });
await server.start();
const app = express();
server.applyMiddleware({ app });
await new Promise(resolve => app.listen({ port: 4000 }, resolve));
console.log(`🚀 Server ready at http://localhost:4000${server.graphqlPath}`);
return { server, app };
}
startApolloServer()
const query = `
query {
hello
}
`
const document = parse(query)
const res = execute({
schema,
document,
})
console.log('res no request:', res)
if you run it, install apollo-server-express and graphql with npm and you are good to go
To execute you can pass all your request logic as well:
execute({
schema,
document,
rootValue: {},
contextValue: {
userInfo,
dbClient,
},
variableValues: body.variables,
}),
It is highly useful also if you want to test you server. If you need to do subscriptions you can use the subscribe method imported from graphql as well.

How can I use `schema` in apollo client cache?

I use apollo-client in a react project to manage UI state. I define a schema type for apollo mutation but it doesn't seem to work.
Below is how I create apollo client instance.
const cache = new InMemoryCache();
export const createClient = () => {
return new ApolloClient({
cache,
resolvers: {
Mutation: {
...alertResolvers
},
},
typeDefs: [alertTypeDefs]
});
};
Below code is the type schema definition. As you can see I have created a showErrorAlert return type of Alert.
export const alertTypeDefs = gql`
type Alert {
id: ID!
message: String!
type: String!
duration: Int!
}
extend type Mutation {
showErrorAlert(message: String!): Alert
}
`;
I use below code to send mutation. As you can see that it doesn't return the duration in the return object. But the application works without any error. It seems that the type doesn't have impact on the application.
gql`
mutation showErrorAlert($message: String!) {
showErrorAlert(message: $message) #client {
id
message
type
}
}
`;
From the docs:
You can optionally set a client-side schema to be used with Apollo Client, through either the ApolloClient constructor typeDefs parameter, or the local state API setTypeDefs method... This schema is not used for validation like it is on the server because the graphql-js modules for schema validation would dramatically increase your bundle size. Instead, your client-side schema is used for introspection in Apollo Client Devtools, where you can explore your schema in GraphiQL.
In other words, the only point of providing typeDefs for local state is enable querying local state through GraphiQL in Apollo Client Devtools.
There is no type validation for local state, although the client will throw if there is a mismatch in the general shape of the object in the cache compared to what's being requested.

Log Query/Mutation actions to database for Auditing

My goal is to run some kind of webhook, cloud function or say I want to perform some kind of action after each query success or mutation success in graphql.
Means I want to log each and every action performed by users (kind of history of when what was created and updated).
How can this be implemented using some kind of middleware between graphql and DB (say mongo for now)?
Means that middleware should be responsible to run the logging action each time a query or mutation is called from front-end.
Tech stack being used is- Node, express, graphQl, Redis etc.
Any suggestions would really be appreciated.
Thanks
The solution I came up with was calling a function manually each time a query or mutate.
If you're using Apollo, you can utilize the formatResponse and formatError options for logging, as outlined in the docs.
const server = new ApolloServer({
typeDefs,
resolvers,
formatError: error => {
console.log(error);
return error;
},
formatResponse: response => {
console.log(response);
return response;
},
});
Using an extension can allow you to hook into different phases of the GraphQL request and allow more granular logging. A simple example:
const _ = require('lodash')
const { GraphQLExtension } = require('graphql-extensions')
module.exports = class LoggingExtension extends GraphQLExtension {
requestDidStart(options) {
logger.info('Operation: ' + options.operationName)
}
willSendResponse(o) {
const errors = _.get(o, 'graphqlResponse.errors', [])
for (const error of errors) {
logger.error(error)
}
}
}
There's a more involved example here. You can then add your extension like this:
const server = new ApolloServer({
typeDefs,
resolvers,
extensions: [() => new YourExtension()]
});
If you're using express-graphql to serve your endpoint, your options are a bit more limited. There's still a formatError option, but no formatResponse. There is a way to pass in an extensions array as well, but the API is different from Apollo's. You can take a look at the repo for more info.

Apollo client: Can #defer be used with client side resolvers?

For some reason, I had to build a client-side only GraphQL server, my schema is built as follow:
private buildSchema(): GraphQLSchema {
const allTypes: string = ...// my types
const allResolvers: IResolvers[] = ...// my resolvers
return makeExecutableSchema({
typeDefs: allTypes,
resolvers: allResolvers
});
}
The client is as follow:
this.client = new ApolloClient({
link: new SchemaLink({schema: this.buildSchema()}),
cache: new InMemoryCache({
addTypename: false
})
});
And everything works fine except that my queries are not defered. For instance if I run:
const gqlQuery: string = `
{
user {
name
slowResolver #defer {
text
}
}
}
`
const $result = this.apollo.getClient().watchQuery({
query: gql(gqlQuery)
});
The $result will be emited only when the whole query will be resolved (instead of user and then slowResolver as expected).
Any idea of what I missed in the workflow?
The #defer directive was actually removed from Apollo, although there's been some work done to reimplement it. Even if it's implemented, though, deferred queries would have to be handled outside of the execution context. In other words, executing the schema can return a deferred execution result, but something else (like Apollo server itself) has to handle how that response (both the initial payload, and the subsequent patches) are actually sent to the server over whatever transport.
If you're defining a schema client-side, unfortunately, it's not going to be possible to use the #defer directive.

Inspecting a remote graphql endpoint with graphiql

There is a graphql endpoint which I don't own but which provides a public endpoint. I'm hoping to introspect it using graphiql. I'm totally new to graphql, so I don't even know if this sort of thing is possible.
I have the graphiql example running locally and am modifying server.js to try to make it work. Poking around at other SO threads has gotten me this far...
var introspectionQuery = require('graphql/utilities').introspectionQuery;
var request = require('sync-request');
var url = 'http://endpoint.com/graphql';
var response = request('POST', url, { qs: { query: introspectionQuery } } );
var schema = JSON.parse(response.body.toString('utf-8'));
// herein lies the rub
schema = new GraphQLSchema(schema.data.__schema);
var app = express();
app.use(express.static(__dirname));
app.use('/graphql', graphqlHTTP(() => ({
schema: schema,
})));
app.listen(8080);
This code blows up in the GraphQLSchema constructor, trying to make a schema out of that introspection query. Clearly that's not quite the right approach?
What you want to build schema out of the introspection result is buildClientSchema:
var buildClientSchema = require('graphql/utilities').buildClientSchema;
var introspectionQuery = require('graphql/utilities').introspectionQuery;
var request = require('sync-request');
var response = request('POST', url, { qs: { query: introspectionQuery } });
// Assuming we're waiting for the above request to finish (await maybe)
var introspectionResult = JSON.parse(response.body.toString('utf-8'));
var schema = buildClientSchema(introspectionResult);
You could build the schema in two other ways: buildASTSchema and instantiating GraphQLSchema directly, which is what you're trying out. GraphQLSchema constructor takes in an object with GraphQLSchemaConfig type:
type GraphQLSchemaConfig = {
query: GraphQLObjectType;
mutation?: ?GraphQLObjectType;
subscription?: ?GraphQLObjectType;
types?: ?Array<GraphQLNamedType>;
directives?: ?Array<GraphQLDirective>;
};
And those two utility modules provide easier ways to build the schema from either from introspection query result or parsed IDL type definitions, respectively by using buildClientSchema or buildASTSchema. Refer to those modules in graphql-js/src/utilities directory for more information please.
I was trying this with a PHP GraphQL library. I hit lots of issues experimenting with the above around CORS (cross origin security stuff).
Then I discovered GraphIQL is available as a Chrome app. That resolved my need, so noting here in case useful to anyone else who comes across this issue. You don't need to do any coding to get GraphIQL working with a remote endpoint.

Resources