Provide explicit type for the mutation GraphQL - graphql

I'm trying to create a mutation which will accept list of products. But doing so GraphQL is throwing error for createMultipleProducts method. Not sure what is the mistake here.
import { Inject } from "#nestjs/common";
import { Args, Mutation, Query, Resolver } from "#nestjs/graphql";
import { ClientProxy } from "#nestjs/microservices";
import { ProductRequest } from "src/types/ms-product/product.request.type";
import { ProductResponse } from "src/types/ms-product/product.response.type";
#Resolver(of => ProductResponse)
export class ProductResolver {
constructor(
#Inject('SERVICE__PRODUCT') private readonly clientServiceProduct: ClientProxy
) {}
#Mutation(returns => ProductResponse)
async createProduct(#Args('data') product: ProductRequest): Promise<ProductResponse> {
const PATTERN = {cmd: 'ms-product-create'};
const PAYLOAD = product;
return this.clientServiceProduct.send(PATTERN, PAYLOAD)
.toPromise()
.then((response: ProductResponse) => {
return response;
})
.catch((error) => {
return error;
})
}
#Mutation(returns => [ProductResponse])
async createMultipleProducts(#Args('data') products: [ProductRequest]): Promise<Array<ProductResponse>> {
try {
const PROMISES = products.map(async (product: ProductRequest) => {
const PATTERN = {cmd: 'ms-product-create'};
const PAYLOAD = product;
return await this.clientServiceProduct.send(PATTERN, PAYLOAD).toPromise();
});
return await Promise.all(PROMISES);
} catch (error) {
throw new Error(error);
}
}
#Query(returns => ProductResponse)
async readProduct(#Args('data') id: string) {
return {}
}
}
I'm getting this error:
UnhandledPromiseRejectionWarning: Error: Undefined type error. Make sure you are providing an explicit type for the "createMultipleProducts" (parameter at index [0]) of the "ProductResolver" class.

There is a need to inform GraphQL the type of the arguments explicitly if it is a complex object array.
#Mutation(returns => [ProductResponse])
async createMultipleProducts(#Args({ name: 'data', type: () => [ProductRequest] }) products: ProductRequest[]): Promise<Array<ProductResponse>> {
...
}

New format 2022
#Query(returns => ProductResponse)
async readProduct(#Args('data', () => String ) id: string) {
return {}
}

Related

GraphQL with Prisma: how to make a delete mutation

I am trying to figure out how to make a delete mutation in my app.
I have an Issue Service, Issue Resolver, and Issue Form.
The service has:
import { prisma } from "../../lib/prisma"
import { Service } from "typedi"
import { IssueInput } from "./inputs/create.input"
import { Resolver } from "type-graphql"
import { Issue } from "./issue.model"
#Service()
#Resolver(() => Issue)
export class IssueService {
async createIssue(data: IssueInput) {
return await prisma.issue.create({ data })
}
async getAllIssues() {
return await prisma.issue.findMany()
}
async getIssue(id: string) {
return await prisma.issue.findUnique({ where: { id } })
}
async deleteIssue(id: string) {
return await prisma.issue.delete({ where: { id } })
}
}
The resolver has:
import { Arg, Mutation, Query, Resolver } from "type-graphql"
import { Issue } from "./issue.model"
import { IssueService } from "./issue.service"
import { IssueInput } from "./inputs/create.input"
import { Inject, Service } from "typedi"
#Service()
#Resolver(() => Issue)
export default class IssueResolver {
#Inject(() => IssueService)
issueService: IssueService
#Query(() => [Issue])
async allIssues() {
return await this.issueService.getAllIssues()
}
#Query(() => Issue)
async issue(#Arg("id") id: string) {
return await this.issueService.getIssue(id)
}
#Mutation(() => Issue)
async createIssue(#Arg("data") data: IssueInput) {
return await this.issueService.createIssue(data)
}
#Mutation(() => Issue)
async deleteIssue(#Arg("id") id: string) {
return await this.issueService.deleteIssue(id)
}
}
My lib/graphql sort of recognises that I tried to make the mutations. It has entries as follows:
export type Mutation = {
__typename?: 'Mutation';
createIssue: Issue;
deleteIssue: Issue;
export type MutationDeleteIssueArgs = {
id: Scalars['String'];
};
Apart from the above two references, the lib/graphql does not have something that looks like the other mutations and queries.
In the issue form, I want to try and use the delete mutation, so I tried:
import {
IssueInput,
useAllIssuesQuery,
useCreateIssueMutation,
useDeleteIssueMutation, ## this is not recognised as an exported member of lib/graphql
} from "lib/graphql"
How can I add it to the lib/graphql. Whatever the process for generating the mutation was has obviously run, but I don't understand why it didn't make something I can use in the form.
My goal is to try and figure out how to write something along the following lines to try and delete an entry.
{ onDelete: async (id) => {
await fetch("api/issue", { method: "delete" }),
toast({
title: "Issue deleted",
})
refetch()
refetchClimate()
}
}

update the state slice in redux lwc from the action payload

below is my code to update the state.customer slice. However when this runs, I see that the next state is not updated with the payload dispatched from the action. can some one please point out what I'm missing?
reducer:
const initialState1 = {"customer":{}};
const customer = (state = initialState1, action) => {
console.log('state:', state);
switch (action.type) {
case 'INIT_CUSTOMER_INFO':
return {
...state,
customer: action.payload
}
case 'UPD_CUSTOMER_INFO':
console.log(action);
return { ...customer, firstname: action.firstname }
default: return state;
}
}
export default customer;
action
export const initCustomer = customer => {
return {
type: 'INIT_CUSTOMER_INFO',
payload : customer
}
}
dispatch from LWC
import { LightningElement, track } from 'lwc';
import { connect } from 'c/connect';
import { updateCustomer, initCustomer } from 'c/actions';
import getJSONData from '#salesforce/apex/RGClass.getCartSummary';
const mapStateToProps = (state, ownProps) => ({
customer: state.customer
})
const mapDispatchToProps = (dispatch, ownProps) => ({
initCustomer : customer => dispatch(initCustomer(customer)),
updateCustomer : customer => dispatch(updateCustomer(customer))
})
export default class DigiForm extends LightningElement {
#track firstname;
showfirstname;
connectedCallback() {
//add the hook
connect(mapStateToProps, mapDispatchToProps)(this);//connects the
//api call
getJSONData()
.then(result => {
console.log('result:',result);
this.initCustomer(result);
})
.catch(error => {
console.log(error);
});
}
onContinue = () => {
let fn = this.template.querySelector('lightning-input').value;
console.log('firstname:', fn);
this.updateCustomer({ firstname : fn});
if(fn != null){
this.showfirstname = true;
}
}
}
Tried a couple of options but none worked. any help would be much appreciated!

How to upload file using nestjs-graphql-fastify server and how to test such feature?

I struggle to upload .csv file to nestjs-graphql-fastify server. Tried following code:
#Mutation(() => Boolean)
async createUsers(
#Args({ name: 'file', type: () => GraphQLUpload })
{ createReadStream, filename }: FileUpload,
): Promise<boolean> {
try {
// backend logic . . .
} catch {
return false;
}
return true;
}
but all I get when testing with postman is this response:
{
"statusCode": 415,
"code": "FST_ERR_CTP_INVALID_MEDIA_TYPE",
"error": "Unsupported Media Type",
"message": "Unsupported Media Type: multipart/form-data; boundary=--------------------------511769018912715357993837"
}
Developing with code-first approach.
Update: Tried to use fastify-multipart but issue still remains. What has changed is response in postman:
POST body missing, invalid Content-Type, or JSON object has no keys.
Found some answer's on Nestjs discord channel.
You had to do following changes:
main.ts
async function bootstrap() {
const adapter = new FastifyAdapter();
const fastify = adapter.getInstance();
fastify.addContentTypeParser('multipart', (request, done) => {
request.isMultipart = true;
done();
});
fastify.addHook('preValidation', async function (request: any, reply) {
if (!request.raw.isMultipart) {
return;
}
request.body = await processRequest(request.raw, reply.raw);
});
const app = await NestFactory.create<NestFastifyApplication>(
AppModule,
adapter,
);
await app.listen(apiServerPort, apiServerHost);
}
bootstrap();
upload.scalar.ts
import { Scalar } from '#nestjs/graphql';
import { GraphQLUpload } from 'graphql-upload';
#Scalar('Upload')
export class UploadGraphQLScalar {
protected parseValue(value) {
return GraphQLUpload.parseValue(value);
}
protected serialize(value) {
return GraphQLUpload.serialize(value);
}
protected parseLiteral(ast) {
return GraphQLUpload.parseLiteral(ast, ast.value);
}
}
users.resolver.ts
#Mutation(() => CreateUsersOutput, {name: 'createUsers'})
async createUsers(
#Args('input', new ValidationPipe()) input: CreateUsersInput,
#ReqUser() reqUser: RequestUser,
): Promise<CreateUsersOutput> {
return this.usersService.createUsers(input, reqUser);
}
create-shared.input.ts
#InputType()
export class DataObject {
#Field(() => UploadGraphQLScalar)
#Exclude()
public readonly csv?: Promise<FileUpload>;
}
#InputType()
#ArgsType()
export class CreateUsersInput {
#Field(() => DataObject)
public readonly data: DataObject;
}
Also, I want to mention you should not use global validation pipes (in my case they made files unreadable)
// app.useGlobalPipes(new ValidationPipe({ transform: true }));
You could use graphql-python/gql to try to upload a file:
from gql import Client, gql
from gql.transport.aiohttp import AIOHTTPTransport
transport = AIOHTTPTransport(url='YOUR_URL')
client = Client(transport=transport)
query = gql('''
mutation($file: Upload!) {
createUsers(file: $file)
}
''')
with open("YOUR_FILE_PATH", "rb") as f:
params = {"file": f}
result = client.execute(
query, variable_values=params, upload_files=True
)
print(result)
If you activate logging, you can see some message exchanged between the client and the backend.

GraphQL endpoint return null object in Nest.js

I'm using Nest.js and Sequelize-Typescript to build a GraphQL API.
When I called delete and update mutations I got a null object, but the operation it is done. I need to put {nullable: true} because I got a error saying Cannot return null for non-nullable field . How I fix it? I need the endpoint to return the updated object to show the information on the front
error img
book.dto.ts
import { ObjectType, Field, Int, ID } from 'type-graphql';
#ObjectType()
export class BookType {
#Field(() => ID, {nullable: true})
readonly id: number;
#Field({nullable: true})
readonly title: string;
#Field({nullable: true})
readonly author: string;
}
book.resolver.ts
import {Args, Mutation, Query, Resolver} from '#nestjs/graphql';
import { Book } from './model/book.entity';
import { BookType } from './dto/book.dto';
import { CreateBookInput } from './input/createBook.input';
import { UpdateBookInput } from './input/updateBook.input';
import { BookService } from './book.service';
#Resolver('Book')
export class BookResolver {
constructor(private readonly bookService: BookService) {}
#Query(() => [BookType])
async getAll(): Promise<BookType[]> {
return await this.bookService.findAll();
}
#Query(() => BookType)
async getOne(#Args('id') id: number) {
return await this.bookService.find(id);
}
#Mutation(() => BookType)
async createItem(#Args('input') input: CreateBookInput): Promise<Book> {
const book = new Book();
book.author = input.author;
book.title = input.title;
return await this.bookService.create(book);
}
#Mutation(() => BookType)
async updateItem(
#Args('input') input: UpdateBookInput): Promise<[number, Book[]]> {
return await this.bookService.update(input);
}
#Mutation(() => BookType)
async deleteItem(#Args('id') id: number) {
return await this.bookService.delete(id);
}
#Query(() => String)
async hello() {
return 'hello';
}
}
book.service.ts
import {Inject, Injectable} from '#nestjs/common';
import {InjectRepository} from '#nestjs/typeorm';
import {Book} from './model/book.entity';
import {DeleteResult, InsertResult, Repository, UpdateResult} from 'typeorm';
#Injectable()
export class BookService {
constructor(#Inject('BOOKS_REPOSITORY') private readonly bookRepository: typeof Book) {}
findAll(): Promise<Book[]> {
return this.bookRepository.findAll<Book>();
}
find(id): Promise<Book> {
return this.bookRepository.findOne({where: {id}});
}
create(data): Promise<Book> {
return data.save();
}
update(data): Promise<[number, Book[]]> {
return this.bookRepository.update<Book>(data, { where: {id: data.id} });
}
delete(id): Promise<number> {
return this.bookRepository.destroy({where: {id}});
}
}
You can fix it setting option parameter in the resolver query
#Query(() => BookType, { nullable: true })
Why would you want to return those fields from a delete? You must already have them on your front end... you could just change the return type of that mutation to true or false based on whether it worked or not... and in the update you could do the mutation and add returning: true in your options if you are using postgres... if not then don't return the result of the update, do the update and return the result of findOne or findById whichever is applicable

rxjs first completes whole stream chain

I have a angular 5 app with the rxjs WebsocketSubject sending jsonrpc messages.
This is my sendRequest function
sendRequest(request: Request): Promise<Response> {
console.log(request);
this.socket.next(JSON.stringify(request));
return this.onResponse().filter((response: Response) => {
return response.id === request.id;
}).first().toPromise().then((response) => {
console.log(response);
if (response.error) {
console.log('error');
throw new RpcError(response.error);
}
return response;
});
}
I am using the first() operator to complete this filter subscription. But onResponse() comes directly from my WebsocketSubject and this will then be completed.
Are there any methods for decoupling the original subject?
Or should I create a new Observale.create(...)?
What happens with the written .filter function. Does it last anywhere or do I have to remove it anywhere preventing ever lasting filter calls?
Edit 1
Also using this does not help.
sendRequest(request: Request): Promise<Response> {
console.log(request);
this.socket.next(JSON.stringify(request));
return new Promise<Response>((resolve, reject) => {
const responseSubscription = this.onResponse().filter((response: Response) => {
console.log('filter');
return response.id === request.id;
}).subscribe((response: Response) => {
// responseSubscription.unsubscribe();
resolve(response);
});
});
}
If I execute the unsubscribe the whole websocketSubject is closed. Not doing so logs 'filter' on time more per request !!
Edit 2
Here is the whole websocketService i have written
import {Injectable} from "#angular/core";
import {WebSocketSubject, WebSocketSubjectConfig} from "rxjs/observable/dom/WebSocketSubject";
import {MessageFactory, Notification, Request, Response, RpcError} from "../misc/jsonrpc";
import {ReplaySubject} from "rxjs/ReplaySubject";
import {Observable} from "rxjs/Observable";
import 'rxjs/add/operator/toPromise';
import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/first';
import 'rxjs/add/observable/from';
export enum ConnectionState {
CONNECTED = "Connected",
CONNECTING = "Connecting",
CLOSING = "Closing",
DISCONNECTED = "Disconnected"
}
#Injectable()
export class WebsocketService {
private connectionState = new ReplaySubject<ConnectionState>(1);
private socket: WebSocketSubject<ArrayBuffer | Object>;
private config: WebSocketSubjectConfig;
constructor() {
console.log('ctor');
const protocol = location.protocol === 'https' ? 'wss' : 'ws';
const host = location.hostname;
const port = 3000; // location.port;
this.config = {
binaryType: "arraybuffer",
url: `${protocol}://${host}:${port}`,
openObserver: {
next: () => this.connectionState.next(ConnectionState.CONNECTED)
},
closingObserver: {
next: () => this.connectionState.next(ConnectionState.CLOSING)
},
closeObserver: {
next: () => this.connectionState.next(ConnectionState.DISCONNECTED)
},
resultSelector: (e: MessageEvent) => {
try {
if (e.data instanceof ArrayBuffer) {
return e.data;
} else {
return JSON.parse(e.data);
}
} catch (e) {
console.error(e);
return null;
}
}
};
this.connectionState.next(ConnectionState.CONNECTING);
this.socket = new WebSocketSubject(this.config);
this.connectionState.subscribe((state) => {
console.log(`WS state ${state}`);
});
}
onBinaryData(): Observable<ArrayBuffer> {
return this.socket.filter((message: any) => {
return message instanceof ArrayBuffer;
});
}
onMessageData(): Observable<Object> {
return this.socket.filter((message: any) => {
return !(message instanceof ArrayBuffer);
});
}
onResponse(): Observable<Response> {
return this.onMessageData().filter((message) => {
return MessageFactory.from(message).isResponse();
}).map((message): Response => {
return MessageFactory.from(message).toResponse();
});
}
sendRequest(request: Request): Promise<Response> {
console.log(request);
this.socket.next(JSON.stringify(request));
return new Promise<Response>((resolve, reject) => {
const responseSubscription = this.onResponse().filter((response: Response) => {
console.log('filter');
return response.id === request.id;
}).subscribe((response: Response) => {
responseSubscription.unsubscribe();
resolve(response);
});
});
}
sendNotification(notification: Notification): void {
this.socket.next(JSON.stringify(notification));
}
}
And the result in my log
Using Angular 5.0.2
websocket.service.ts:27 ctor
websocket.service.ts:69 WS state Connecting
core.js:3565 Angular is running in the development mode. Call enableProdMode() to enable the production mode.
websocket.service.ts:96 Request {jsonrpc: "2.0", id: "b042005c-5fbf-5ffc-fbd1-df68fae5882e", method: "appointment_list_get", params: undefined}
websocket.service.ts:69 WS state Connected
websocket.service.ts:103 filter
websocket.service.ts:69 WS state Disconnected
I need to find a way decoupling my filter from the original stream somehow.
This is working.
The key was to decouple the message handling from the underlaying websocketSubject.
import {Injectable} from "#angular/core";
import {WebSocketSubject, WebSocketSubjectConfig} from "rxjs/observable/dom/WebSocketSubject";
import {MessageFactory, Notification, Request, Response, RpcError} from "../misc/jsonrpc";
import {ReplaySubject} from "rxjs/ReplaySubject";
import {Observable} from "rxjs/Observable";
import 'rxjs/add/operator/toPromise';
import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/first';
import 'rxjs/add/observable/from';
import {Subject} from "rxjs/Subject";
export enum ConnectionState {
CONNECTED = "Connected",
CONNECTING = "Connecting",
CLOSING = "Closing",
DISCONNECTED = "Disconnected"
}
#Injectable()
export class WebsocketService {
private connectionState = new ReplaySubject<ConnectionState>(1);
private socket: WebSocketSubject<ArrayBuffer | Object>;
private config: WebSocketSubjectConfig;
private messageObserver = new Subject<MessageFactory>();
private binaryObserver = new Subject<ArrayBuffer>();
constructor() {
const protocol = location.protocol === 'https' ? 'wss' : 'ws';
const host = location.hostname;
const port = 3000; // location.port;
this.config = {
binaryType: "arraybuffer",
url: `${protocol}://${host}:${port}`,
openObserver: {
next: () => this.connectionState.next(ConnectionState.CONNECTED)
},
closingObserver: {
next: () => this.connectionState.next(ConnectionState.CLOSING)
},
closeObserver: {
next: () => this.connectionState.next(ConnectionState.DISCONNECTED)
},
resultSelector: (e: MessageEvent) => {
try {
if (e.data instanceof ArrayBuffer) {
return e.data;
} else {
return JSON.parse(e.data);
}
} catch (e) {
console.error(e);
return null;
}
}
};
this.connectionState.next(ConnectionState.CONNECTING);
this.socket = new WebSocketSubject(this.config);
this.socket.filter((message: any) => {
return message instanceof ArrayBuffer;
}).subscribe((message: ArrayBuffer) => {
this.binaryObserver.next(message);
});
this.socket.filter((message: any) => {
return !(message instanceof ArrayBuffer);
}).subscribe((message: ArrayBuffer) => {
this.messageObserver.next(MessageFactory.from(message));
});
this.connectionState.subscribe((state) => {
console.log(`WS state ${state}`);
});
}
onResponse(): Observable<Response> {
return this.messageObserver.filter((message: MessageFactory) => {
return message.isResponse();
}).map((message: MessageFactory): Response => {
return message.toResponse();
});
}
sendRequest(request: Request): Promise<Response> {
console.log(request);
this.socket.next(JSON.stringify(request));
return this.onResponse().filter((response: Response) => {
return request.id === response.id;
}).first().toPromise().then((response) => {
console.log(response);
if (response.error) {
console.log('error');
throw new RpcError(response.error);
}
return response;
});
}
sendNotification(notification: Notification): void {
this.socket.next(JSON.stringify(notification));
}
}

Resources