I am running into a weird bug.
For some reason, I can console.log(request) but I cant return the request parameter
here is the code that is giving me an issue.
import { Controller, Post, Body, Req } from '#nestjs/common';
import express from 'express';
#Controller('media-alpha')
export class MediaAlphaController {
#Post('/setflagonbid')
setFlagsOnBid(
#Req() request: express.Request
) {
console.log(request); // This works perfect
return request; // this line throws an error
}
}
this is the error::
The inferred type of 'setFlagsOnBid' cannot be named without a reference to '.pnpm/#types+express-serve-static-core#4.17.31/node_modules/#types/express-serve-static-core'. This is likely not portable. A type annotation is necessary.ts(2742)
why can I print the request but I cant return it?
Related
I am using interceptor on a controller to feed mock data if user is tagged as a demo user in the jwt
It works fine, mock data are fed to client and request doesn't reach my controller, but I still get following error in console :
UnhandledPromiseRejectionWarning: Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client
This is my interceptor :
#Injectable()
export class UserPageStatsInterceptor implements NestInterceptor {
intercept(context: ExecutionContext, next: CallHandler): Observable<any> {
// Let controller handle request
if (!isDemo(context)) {
return next.handle();
}
// Feed mock datas
const res = context.switchToHttp().getResponse();
res.status(200).send('Demo data');
}
}
And here is my controller :
#Get('statistics')
#UseInterceptors(UserPageStatsInterceptor)
getUsersGlobalStatistics(
#Headers() headers: CustomHeaders,
#Query() filters: BasicFiltersDTO,
#Req() req,
): Promise<UserStatisticsDTO> {
return 'Real data';
}
I suspect that after my UserPageStatsInterceptor the request continues somewhere in the internal of nestjs framework but I haven't been able to find out where.
I have tried adding a returnor res.end() at the end but it doesn't change anything.
Note that this only happens when making queries on my frontend client and doesn't happen in postman
Thank you in advance guys !!
Instead of calling res.send() inside of your interceptor, why not just return an observable that has the data you want to return?
#Injectable()
export class UserPageStatsInterceptor implements NestInterceptor {
intercept(context: ExecutionContext, next: CallHandler): Observable<any> {
// Let controller handle request
if (!isDemo(context)) {
return next.handle();
}
return of('Demo data');
}
}
This will let Nest still handle the response, and not get in the way of actually running your service code.
I'm trying to learn how to use rails combined with graphql to create a rails API by developing a simple app that just retrieves text (in my case, quotes) from a database and shows it on screen. I am using flutter for frontend and rails with graphql as the backend. The backend part was easy to create because I already had some rails knowledge but the frontend part is something I'm new to and I'm trying to figure out how to access a graphql query that I created via flutter to get the data that needs to be displayed.
Below is the flutter code that I currently have (partially adapted from How to build a mobile app from scratch with Flutter and maybe Rails?).
import 'dart:async';
import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
Future<Quote> fetchQuote() async {
final response =
await http.get('http://10.0.2.2:3000/graphql?query={quote{text}}');
if (response.statusCode == 200) {
// If the call to the server was successful, parse the JSON.
return Quote.fromJson(json.decode(response.body));
} else {
// If that call was not successful, throw an error.
throw Exception('Failed to load quote');
}
}
class Quote {
final String text;
Quote({this.text});
factory Quote.fromJson(Map<String, dynamic> json) {
return Quote(
text: json['text']
);
}
}
void main() => runApp(MyApp(quote: fetchQuote()));
class MyApp extends StatelessWidget {
final Future<Quote> quote;
MyApp({this.quote});
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Fetch Data Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: Text('Fetch Data Example'),
),
body: Center(
child: FutureBuilder<Quote>(
future: quote,
builder: (context, snapshot) {
if (snapshot.hasData) {
return Text(snapshot.data.text);
} else if (snapshot.hasError) {
return Text("${snapshot.error}");
}
// By default, show a loading spinner.
return CircularProgressIndicator();
},
),
),
),
);
}
}
Some obvious reasons why this code is wrong that I already figured out myself is that the graphql server expects a post request for the query while my code is sending a get request but that is my question. How do I send a post request for my graphql server in flutter to retrieve the data? The query that I'm trying to access is the one after '?query=' in my flutter code.
This took me a minute to figure out, too, but here is what I did in my practice todo app:
1 - Read this page on graphql post requests over http. There is a section for GET Requests as well as POST.
2 - Make sure your body function argument is correctly json-encoded (see code below).
Tip: Using Postman, you can test the graphql endpoint w/different headers & authorization tokens, and request bodies. It also has a neat feature to generate code from the request. Check out this page for details. It's not 100% accurate, but that's what helped me figure out how to properly format the request body. In the function post, apparently you can't change the content-type if you provide a Map as the body of the request (and the request content types is application/json), so a String worked for my use case.
Sample Code (uses a GqlParser class to properly encode the request body):
import 'dart:convert';
import 'package:http/http.dart' as http;
import 'todo.dart';
import '../creds/creds.dart';
import 'gql_parser.dart';
const parser = GqlParser('bin/graphql');
class TodoApiException implements Exception {
const TodoApiException(this.message);
final String message;
}
class TodoApiClient {
const TodoApiClient();
static final gqlUrl = Uri.parse(Credential.gqlEndpoint);
static final headers = {
"x-hasura-admin-secret": Credential.gqlAdminSecret,
"Content-Type": "application/json",
};
Future<List<Todo>> getTodoList(int userId) async {
final response = await http.post(
gqlUrl,
headers: headers,
body: parser.gqlRequestBody('users_todos', {'userId': userId}),
);
if (response.statusCode != 200) {
throw TodoApiException('Error fetching todos for User ID $userId');
}
final decodedJson = jsonDecode(response.body)['data']['todos'] as List;
var todos = <Todo>[];
decodedJson.forEach((todo) => todos.add(Todo.fromJson(todo)));
return todos;
}
// ... rest of class code ommitted
Per the .post() body argument documentation:
If it's a String, it's encoded using [encoding] and used as the body
of the request. The content-type of the request will default to
"text/plain".
If [body] is a List, it's used as a list of bytes for the body of the
request.
If [body] is a Map, it's encoded as form fields using [encoding]. The
content-type of the request will be set to
"application/x-www-form-urlencoded"; this cannot be overridden.
I simplified the creation of a string to provide as the body of an argument with the following code below, in a GqlParser class. This will allow you to have a folder such as graphql that contains multiple *.graphql queries/mutations. Then you simply use the parser in your other classes that need to make simple graphql endpoint requests, and provide the name of the file (without the extension).
import 'dart:convert';
import 'dart:io';
class GqlParser {
/// provide the path relative to of the folder containing graphql queries, with no trailing or leading "/".
/// For example, if entire project is inside the `my_app` folder, and graphql queries are inside `bin/graphql`,
/// use `bin/graphql` as the argument.
const GqlParser(this.gqlFolderPath);
final String gqlFolderPath;
/// Provided the name of the file w/out extension, will return a string of the file contents
String gqlToString(String fileName) {
final pathToFile =
'${Directory.current.path}/${gqlFolderPath}/${fileName}.graphql';
final gqlFileText = File(pathToFile).readAsLinesSync().join();
return gqlFileText;
}
/// Return a json-encoded string of the request body for a graphql request, given the filename (without extension)
String gqlRequestBody(String gqlFileName, Map<String, dynamic> variables) {
final body = {
"query": this.gqlToString(gqlFileName),
"variables": variables
};
return jsonEncode(body);
}
}
I've created global error handler in my Angular 6 application:
main error handler method:
handleError(error: Error | HttpErrorResponse) {
const router = this.injector.get(Router);
const notificationService = this.injector.get(NotificationsService);
this._logger(error);
if (!navigator.onLine) {
notificationService.displayNotification('error', 'timespan', {heading: 'Internet connection lost!', body: ''});
} else if (error instanceof HttpErrorResponse) {
notificationService.displayNotification('error', 'click', this._httpErrorMessage(error));
} else {
// CLIENT error
router.navigate(['/error-page']);
}
}
Problem:
Many of HTTP service calls are being performed in resolvers:
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<ClientDetailsModel> {
if (route.params.cif) {
const reqBody = new GetClientDetailsRequestModel({cif: route.params.cif, idWewPrac: this.userContext.getUserSKP()});
return this.clientsService.getClientDetails(reqBody)
.pipe(
map((clientDetails: { customerDetails: ClientDetailsModel }) => {
if (clientDetails.customerDetails) {
return clientDetails.customerDetails;
}
return null;
})
);
}
If Http error occurs in such a call, error received by my global error handler is formed as HttpErrorResponse wrapped inside Error (message of Error is HttpErrorResponse):
Uncaught (in promise): HttpErrorResponse: {"headers":{"normalizedNames":{},"lazyUpdate":null},"status":400,"statusText":"OK","url":"https://...
If Http errors occurs outside of resolvers global error handler works perfectly fine.
To reach my goal (throwing HttpErrorResponse from resolver) I need to specify the way to handle error in error callback inside subscription, but I cannot do it because resolver is the one who manages subscription.
Is there a way to specify how resolver should handle errors?
I would like to avoid manual parsing of these wrapped errors.
I was searching for a solution, but could only create a work-a-round.
This will check for the HttpErrorResponse text and tries to parse the JSON which results into the real error object.
Not great at all, but better then nothing.
handleError(error: any): void {
console.error('Errorhandler catched error: ' + error.message, error);
// We need to have this little hack in oder to access the real error object
// The Angular resolver / promise wraps the error into the message, serialized as json.
// So we extract this error again.
// But first lets check if we actually dealing with an HttpErrorResponse ...
if (error.message.search('HttpErrorResponse: ')) {
// The error includes an HTTPErrorResponse, so we try to parse it's values ...
const regex = new RegExp('^.*HttpErrorResponse:\\s(\\{.*\\})$');
const matches = regex.exec(error.message);
if (matches !== null) {
// matches the regex, convert...
const httpErrorResponse = JSON.parse(matches[1]); // This is now the real error object with all the fields
this.handleHttpErrorResponse(httpErrorResponse);
} else {
// It contains HttpErrorResponse, but no JSON part...
this.toastr.error('There was an unknown communication error',
'Communication error',
{timeOut: 10000});
}
} else {
this.toastr.error('Unknown error occured',
'Well that should not happen. Check the log for more information...',
{timeOut: 10000});
}
}
In angular 5.2.x for http get and post I had this code:
post(url: string, model: any): Observable<boolean> {
return this.http.post(url, model)
.map(response => response)
.do(data => console.log(url + ': ' + JSON.stringify(data)))
.catch(err => this.handleError(err));
}
get(url: string): Observable<any> {
return this.http.get(url)
.map(response => response)
.do(data =>
console.log(url + ': ' + JSON.stringify(data))
)
.catch((error: any) => Observable.throw(this.handleError(error)));
}
In angular 6 it doesn't work.
How can we make an HTTP post or get request?
Update :
In angular 7, they are the same as 6
In angular 6
the complete answer found in live example
/** POST: add a new hero to the database */
addHero (hero: Hero): Observable<Hero> {
return this.http.post<Hero>(this.heroesUrl, hero, httpOptions)
.pipe(
catchError(this.handleError('addHero', hero))
);
}
/** GET heroes from the server */
getHeroes (): Observable<Hero[]> {
return this.http.get<Hero[]>(this.heroesUrl)
.pipe(
catchError(this.handleError('getHeroes', []))
);
}
it's because of pipeable/lettable operators which now angular is able to use tree-shakable and remove unused imports and optimize the app
some rxjs functions are changed
do -> tap
catch -> catchError
switch -> switchAll
finally -> finalize
more in MIGRATION
and Import paths
For JavaScript developers, the general rule is as follows:
rxjs: Creation methods, types, schedulers and utilities
import { Observable, Subject, asapScheduler, pipe, of, from, interval, merge, fromEvent } from 'rxjs';
rxjs/operators: All pipeable operators:
import { map, filter, scan } from 'rxjs/operators';
rxjs/webSocket: The web socket subject implementation
import { webSocket } from 'rxjs/webSocket';
rxjs/ajax: The Rx ajax implementation
import { ajax } from 'rxjs/ajax';
rxjs/testing: The testing utilities
import { TestScheduler } from 'rxjs/testing';
and for backward compatability you can use rxjs-compat
You can do a post/get using a library which allows you to use HttpClient with strongly-typed callbacks.
The data and the error are available directly via these callbacks.
The library is called angular-extended-http-client.
angular-extended-http-client library on GitHub
angular-extended-http-client library on NPM
Very easy to use.
Traditional approach
In the traditional approach you return Observable<HttpResponse<T>> from Service API. This is tied to HttpResponse.
With this approach you have to use .subscribe(x => ...) in the rest of your code.
This creates a tight coupling between the http layer and the rest of your code.
Strongly-typed callback approach
You only deal with your Models in these strongly-typed callbacks.
Hence, The rest of your code only knows about your Models.
Sample usage
The strongly-typed callbacks are
Success:
IObservable<T>
IObservableHttpResponse
IObservableHttpCustomResponse<T>
Failure:
IObservableError<TError>
IObservableHttpError
IObservableHttpCustomError<TError>
Add package to your project and in your app module
import { HttpClientExtModule } from 'angular-extended-http-client';
and in the #NgModule imports
imports: [
.
.
.
HttpClientExtModule
],
Your Models
export class SearchModel {
code: string;
}
//Normal response returned by the API.
export class RacingResponse {
result: RacingItem[];
}
//Custom exception thrown by the API.
export class APIException {
className: string;
}
Your Service
In your Service, you just create params with these callback types.
Then, pass them on to the HttpClientExt's get method.
import { Injectable, Inject } from '#angular/core'
import { SearchModel, RacingResponse, APIException } from '../models/models'
import { HttpClientExt, IObservable, IObservableError, ResponseType, ErrorType } from 'angular-extended-http-client';
.
.
#Injectable()
export class RacingService {
//Inject HttpClientExt component.
constructor(private client: HttpClientExt, #Inject(APP_CONFIG) private config: AppConfig) {
}
//Declare params of type IObservable<T> and IObservableError<TError>.
//These are the success and failure callbacks.
//The success callback will return the response objects returned by the underlying HttpClient call.
//The failure callback will return the error objects returned by the underlying HttpClient call.
searchRaceInfo(model: SearchModel, success: IObservable<RacingResponse>, failure?: IObservableError<APIException>) {
let url = this.config.apiEndpoint;
this.client.post<SearchModel, RacingResponse>(url, model,
ResponseType.IObservable, success,
ErrorType.IObservableError, failure);
}
}
Your Component
In your Component, your Service is injected and the searchRaceInfo API called as shown below.
search() {
this.service.searchRaceInfo(this.searchModel, response => this.result = response.result,
error => this.errorMsg = error.className);
}
Both, response and error returned in the callbacks are strongly typed. Eg. response is type RacingResponse and error is APIException.
For reading full response in Angular you should add the observe option:
{ observe: 'response' }
return this.http.get(`${environment.serverUrl}/api/posts/${postId}/comments/?page=${page}&size=${size}`, { observe: 'response' });
I'm currently working on a project using Aurelia as the front-end framework, and I'm wondering if there's a more eloquent and less redundant way to set the request header in my API services. The following is an example.
In this Post service, I have created a configureHeaders method that I'm calling prior to every API call because, otherwise, I run into the case where the web token has changed but the request header isn't updated. While creating this configureHeaders method is a functional workaround, I have to do it for each of my services, and it's feeling very redundant.
Is there a way to configure the request header application-wide so that I don't have to create a configureHeaders method for each service and call it for each request?
import {inject} from 'aurelia-framework';
import {HttpClient} from 'aurelia-http-client';
import environment from 'environment';
#inject(HttpClient)
export class Post {
constructor(http) {
this.http = http;
}
configureHeaders() {
this.token = window.localStorage.getItem('token') || null;
this.http = this.http
.configure(x => {
x.withBaseUrl(environment.serverBaseURL);
x.withHeader('Authorization', `Bearer ${this.token}`);
});
}
getPosts() {
this.configureHeaders();
return this.http.get('post')
.then(posts => {
return JSON.parse(posts.response);
});
}
}
As R.Richards commented, Aurelia's HttpClient Interceptor is what you're after.
Here's a class example - as opposed to object with anonymous functions
1.) Declare the interceptor
import {Interceptor, HttpResponseMessage, RequestMessage} from 'aurelia-http-client'
export class CustomInterceptor implements Interceptor {
request(request: RequestMessage): RequestMessage {
//Do request interceptor here
return request;
}
response(response: HttpResponseMessage): HttpResponseMessage{
//Do response interception here
return response;
}
}
2.) Register the interceptor as part of your default http client within your main.js
import {CustomInterceptor} from 'path/to/custom-interceptor'
...
...
http.configure(config => {
//config stuff here
).withInterceptor(new CustomInterceptor())
This should suit your eloquence!