I am making a request using observable. and trying to subcribe the value. But getting error on typescript. any on help me?
I like to do this:
public getCountry(lat,lan):Observable<any>{
return this.http.get(this.googleApi+lat+','+lan+'&sensor=false').subscribe(data => {
return this.genertedData(data);
} );
}
But getting error as follows:
UPDATES
public getCountry(lat,lan):Observable<any>{
return this.http.get(this.googleApi+lat+','+lan+'&sensor=false').map( data => {
data.results.map( array => {
let details = array.address_components.find( obj => obj.types.includes("country") );
this.countryDetails.countryLongName = details.long_name;
this.countryDetails.countryShortName = details.short_name;
})
return this.countryDetails;
})
}
The problem is that your return type states Observable<any>, where as you actually return whatever this.genertedData(data) returns (Hint: Sounds like a typo in your function. Guess it should be called generatedData ?).
Best practice would be to move the http call into a service and subscribe to its returned Observable within your component.
So to speak:
// => service.ts
public getCountryObservable(lat,lan):Observable<any> {
return this.http.get(this.googleApi+lat+','+lan+'&sensor=false');
}
Your component would look something like:
// => component.ts
export class YourComponent {
constructor(public yourService: YourService) {}
getCountry(lat, lan): whateverDataTypeYourGeneratedDataReturns {
this.yourService.getCountryObservable(lat, lan).subscribe((data) => {
this.data = this.generatedData(data);
});
}
}
Since the return type of the function is Observable<any>, I guess it should just return this.http.get(this.googleApi+lat+','+lan+'&sensor=false')
Related
I have a custom hook that looks something like this:
import { useQuery, useQueryClient } from 'react-query'
import { get } from '#/util/api' // Custom API utility
import produce from 'immer' // Using immer for deep object mutation
export function useData() {
const queryClient = useQueryClient()
const { data, isSuccess } = useQuery(
'myData', () => get('data')
)
function addData(moreData) {
const updatedData = produce(data.results, (draft) => {
draft.push(moreData)
})
setData(updatedData)
}
function setData(newData) {
queryClient.setQueryData('myData', newData)
}
return {
data: data && data.results,
setData,
addData,
}
}
My data in data.results is an array of objects. When I call addData it creates a copy of my current data, mutates it, then calls setData where queryClient.setQueryData is called with a new array of objects passed in as my second argument. But my cached data either doesn't update or becomes undefined in the component hooked up to the useData() hook. Does anyone know what I'm doing wrong?
code looks good from react-query perspective, but I'm not sure if that's how immer works. I think with your code, you will get back the same data instance with just a new data.results object on it. I would do:
const updatedData = produce(data, (draft) => {
draft.results.push(moreData)
})
Is there a way to catch and modify response globally on the fly? I can do this for one query like below, but I want to do it for all queries.
apollo: {
post: {
query: Post,
update(data) {
return data.map(item => Object.assign(item, {foo: 'bar'})
}
}
}
It's simplified for this question, but under the hood I'd like to apply a constructor (class) to all objects...
I'm using nuxt-apollo. I searched for a way to do that in clientConfig or elsewhere so the solution may be related to apollo...
Thanks for your advice!
edit:
OK, I found to do that with apollo-link, but I can't modify response. Here the code:
const constructorMiddleware = new ApolloLink((operation, forward) => {
return forward(operation).map(response => {
Object.keys(response.data).map(key => {
if (!Array.isArray(response.data[key])) return;
const newResponse = response.data[key].map(item => {
return item.__typename === 'post'
? Object.assign(item, { foo: 'bar' })
: item
})
console.log(newResponse)
response.data[key] = newResponse
})
return response
})
})
I can see foo: bar in the newResponse, but the graphql returning by nuxt-apollo doesn't contains this newResponse, only original.
Do ApolloLink override response? Does apollo cache change this?
edit 2:
I tried to chain links and the newResponse of the constructorMiddleware is well in the next link. So the problem seems come from nuxt-apollo, or more vue-apollo...
I have a BaseDataService class and it has a method for HttpGet requests.
protected Get<TResponse>(
endPoint: string
): Observable<BaseResponse<TResponse>> {
return this.httpClient.get<TResponse>(this.baseUrl + endPoint).pipe(
map(data => {
const response = <BaseResponse<TResponse>>{};
response.Data = data;
response.Errors = [];
response.HasError = false;
return response;
}),
catchError(errors => {
const response = <BaseResponse<TResponse>>{};
response.Errors = [];
response.Errors.push(errors.error);
response.HasError = true;
return of(response);
})
);
}
And I have a LocationDeviceDataService which extends BaseDataService and it has a method for Get LocationDevices
getAll() {
return this.Get<BasePaginatedResponse<LocationDeviceResponse>>(
EndPoints.GET_LOCATIONDEVICES
);
}
And I am calling this method inside event ,
this.events.subscribe("connection-type:wifi", () => {
this.locationDataService.getAll().subscribe(t => {
localStorage.setItem('LOCATION_DEVICES', JSON.stringify(t.Data.items))
});
});
Everything is fine at first call , but when another events (https://ionicframework.com/docs/api/util/Events/)publish for "connection-type:wifi" this.locationDataService.getAll().subscribe returns responses 1x,2x,4x etc. slower.
I am sure for nothing wrong in back-end.
Should unsubscribe or complete subscription ? If I should , I dont have any trigger for that.
Could you please tell me what is wrong in this code ?
I solved my issue.
I think you can not call observable method inside Ionic events so I changed my method to void. Everything is fine for now.
I'm using Angular2 and I have a question about what is the best way to do if I have many observables.
Can I put subscriptions inside each other or put each one in a different method and put the results in class properties?
Example :
ngOnInit() {
this.route.params**.subscribe**(params => {
if (params['id']) {
this.load = true;
this.batchService.getPagesOfCurrentObject(params['id'], "10", "0")
**.subscribe**(result => {
this.stream = result;
if (this.stream.length > 0) {
this.stream.forEach(page => { this.batchService.getPageStreamById
(page.pageId)**.subscribe**(pageStream => {
let base64 = btoa(new Uint8Array(pageStream.data)
.reduce((data, byte)
=> data + String.fromCharCode(byte), ''));
this.pages.push(base64 );
})
return;
});
}
},
error => this.errorService.setError(<any>error),
() => this.load = false
);
}
});
try {
this.customer = this.sharedService.processSelect.subscription.customer;
} catch (err) {
return;
}
}
Having multiple observables is totally fine, this is what reactive programming is about :)
But here your problem is having too much subscribe. Keep in mind that subscribe is a way to create side effect. To have an easy to read code, you should try to use the least possible subscribe.
Your use case is the perfect use case for the mergeMap operator, that allows you to flatten nested observables.
Here what your code would look like
const response$ = this.route.params
.mergeMap(params => {
return this.batchService.getPagesOfCurrentObject(params['id'])
})
.mergeMap(stream => {
return Rx.Observable.merge(stream.map(page => this.batchService.getPageStreamById(page.pageId))
})
.map(pageStream => /* do your stuff with pageStream, base64 ... */)
response$.subscribe(pageStreamData => pages.push(pageStreamData))
See how there is a single subscription that triggers the side-effect that will modify your app's state
Note that I voluntarily simplified the code (removed error handling and checks) for you to get the idea of how to do that.
I hope it will help you thinking in reactive programming :)
I have some RXJS code that does something like the following....
this.webSocketSubject = Observable.webSocket(url);
...
get webSocketStream() {
return this.webSocketSubject;
}
// Other Service
this.socketService.webSocketStream.filter(message => {
return message.method === "logout";
}).subscribe( this.onLogout );
Then in my test I try something like this...
socketService.sendMessage = jasmine.createSpy("Send Message Spy").and.callFake(function() {
socketService.webSocketStream.next(
{
method: "logout",
status: "OK"
}
)
});
// Just to confirm but doesn't get called
socketService.webSocketStream.subscribe(message => console.log("Ok it actually got called"))
But the subscribe code never gets called. I looked for other examples of test WS in RxJS but all I see is this and I can't get something similar working locally.
How do I test Observable.websocket in RxJS?
I had to resort to this but I don't like it.
constructor(private socket: Subject<any> = undefined ) {
if(!socket){
this.webSocketSubject = Observable.webSocket(url);
}
else{
this.webSocketSubject = socket;
}
};