Connecting to the GraphQL resolver

How to connect resolver in GraphQL

A step-by-step algorithm of creating a query

ScandiPWA is provided with functionality that allows writing GraphQL queries quickly and easily. You will learn to implement a simple query.

Imagine having a following GraphQL schema:

type Mutation {
sendMessage(input: SendMessageInput!): SendMessageOutput
}
input SendMessageInput {
chat_id: String!
message_text: String!
message_image_id: String
}
type SendMessageOutput {
success: Boolean
sent_message_info: SentMessageInformation
}
type SentMessageInformation {
message_id: Int
sender_id: Int
}
  1. Create a file in src/app/query folder. Call it <FunctionalityPartName>.query.js.

  2. In there create a class called <FunctionalityPartName>Query.

  3. Implement query retrieval functionality. Do not forget to add export to the src/query/index.js file.

Note:

ScandiPWA provides Field class as a helper to write GraphQL queries. It is strongly recommended to stick to it as to the only possible way of query implementation

// Chat.query.js
import { Field } from 'Util/Query';
export class ChatQuery {
// The query itself
sendMessage(input) {
return new Field('sendMessage')
// Set query's arguments
.addArgument('input', 'SendMessageInput!', input)
// Add fields to query (Field instance)
.addFieldList(this._getSendMessageFields());
}
// Option 1: setting fields with addFieldList from array
_getSendMessageFields() {
return [
'success',
this._getSentMessageInfoField()
];
}
// Option 2: setting each field manually
_getSentMessageInfoField() {
return new Field('sent_message_info')
.addField('message_id')
.addField('sender_id');
}
}
export default new ChatQuery();

4. Use the query!

Natural question should arise at this point: what does input contain?

Answer is pretty trivial. It is a simple JS object, which has exactly the same structure as defined in SendRmaMessageInput type in the schema. This case it should be the following:

{
chat_id: '1BC2',
message_text: 'My awesome chat API works perfectly fine!',
message_image_id: '5DF1' // Optional because in input type it is defined as optional
}

Generally, there are two options how data can be fetched in ScandiPWA: through Service Worker (in most cases you want to use this option) or around it.

To use SW you need to create a dispatcher in src/app/store/<FunctionalityPartName> that inherits from QueryDispatcher, as follows:

import { QueryDispatcher } from 'Util/Request';
import { ONE_MONTH_IN_SECONDS } from 'Util/Request/QueryDispatcher';
import { SomeQuery } from 'Query';
export class SomeDispatcher extends QueryDispatcher {
constructor() {
/**
About super(name, cacheTTL) - QueryDispatcher constructor
@param name — Name of model for ServiceWorker to send BroadCasts updates to
@param cacheTTL — Cache TTL (in seconds) for ServiceWorker to cache responses
*/
super('Some', ONE_MONTH_IN_SECONDS);
}
onSuccess(options, dispatch) {
// Dispatch action with new data
}
onError(error, dispatch) {
// Handle error
}
prepareRequest(options) {
return [
SomeQuery.getQuery(options)
];
}
}
export default new SomeDispatcher();

To ignore SW functionality functions fetchQuery and fetchMutation can be used as in example below. Simple promise-based workflow.

import { SomeQuery } from 'Query';
import { fetchQuery } from 'Util/Request';
//...
fetchQuery(SomeQuery.getQuery(options))
.then((result) => {
// handle result
})
.catch((err) => {
// handle error
})