cant import createBatchingNetworkInterface from apollo-client - node.js

I am trying to integrate graphql with my vue project.
I am following these instructions: https://github.com/Akryum/vue-apollo
I have npm installed 'apollo-client' as required, but for some reason i can't import 'createBatchingNetworkInterface'.
this is my main.js file:
import Vue from 'vue'
import { ApolloClient, createBatchingNetworkInterface } from 'apollo-client'
import VueApollo from 'vue-apollo'
import App from './App'
import router from './router'
and this is the index.d.ts file of my apollo-client:
export { print as printAST } from 'graphql/language/printer';
export { ObservableQuery, FetchMoreOptions, UpdateQueryOptions, ApolloCurrentResult } from './core/ObservableQuery';
export { WatchQueryOptions, MutationOptions, SubscriptionOptions, FetchPolicy, FetchMoreQueryOptions, SubscribeToMoreOptions, MutationUpdaterFn } from './core/watchQueryOptions';
export { NetworkStatus } from './core/networkStatus';
export * from './core/types';
export { ApolloError } from './errors/ApolloError';
import ApolloClient, { ApolloClientOptions } from './ApolloClient';
export { ApolloClientOptions };
export { ApolloClient };
export default ApolloClient;
I don't see here the 'createBatchingNetworkInterface' desired object.
I don't know what am i doing wrong here.

It sounds like you're using Apollo Client 2.0.You should downgrade to an older version (1.9.3) to continue using network interfaces, including the batching one.
The newest version of the client uses Links instead. You can check out the upgrade guide here if you are interested. you can still batch requests in 2.0 using apollo-link-batch-http.

Related

#apollo/client using svelte "Named export 'remove' not found."

Like this problem, same error is occurring while using svelte kit.
here is the error:
import { remove } from "ts-invariant/process/index.js";
^^^^^^
SyntaxError: Named export 'remove' not found. The requested module 'ts-invariant/process/index.js' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:
import pkg from 'ts-invariant/process/index.js';
const { remove } = pkg;
I'm using the current version(^3.5.10) of #apollo/client, and using the beta version(^3.6.0-beta.6) gets other error; while using import { ApolloClient, InMemoryCache, gql } from '#apollo/client/core/index.js', it gets:
Directory import '/node_modules/#apollo/client/core' is not supported resolving ES modules imported from /node_modules/svelte-apollo/dist/svelte-apollo.js
or if I use import { ApolloClient, InMemoryCache, gql } from '#apollo/client/core', it gets:
Directory import 'node_modules/#apollo/client/core' is not supported resolving ES modules imported from node_modules/svelte-apollo/dist/svelte-apollo.js
Did you mean to import #apollo/client/core/core.cjs?
or if I use import { ApolloClient, InMemoryCache, gql } from '#apollo/client/core/core.cjs' it just says
exports is not defined

export/import javascript class like module node into electron with webpack

In context of basic electon-vue app, I want to create my own javascript class and use it into main process or renderer or into vue component.
I created JS Class but I never find a good way for exporting my class.
All possibility of writing import/export module find in the web finished by same error : Undefined exports
"use strict"
import fs from 'fs'
import typeorm from 'typeorm'
import Public from './../entity/Public'
class ConnectionManager
{
constructor(){}
getConnection(type, name, options) {
}
}
module.exports = ConnectionManager
But it seeams that others js file work perfectly like the vue-router js for routing into vue.js app :
import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: require('#/components/Home').default
}
]
})
I package my code with Webpack and libraryTarget Output is : commonjs2
I seems that use babel-loader with webpack
node version : 10.13.0
electron : 3.0.10
Babel : 6
EDIT :
I try this syntax class js file :
"use strict"
import * as fs from 'fs'
import * as typeorm from 'typeorm'
import {Public} from './../entity/Public'
export default class ConnectionManager
{
constructor(){}
getConnection(type, name, options) {
}
}
with this import syntax :
import ConnectionManager from './../service/connectionManager'
But I have this error when I execute code into electron :
Uncaught TypeError:
_service_connectionManager__WEBPACK_IMPORTED_MODULE_8__.default.getConnection
is not a function
I console logged this service class "ConnectionManager" and I have this result (so it really exist) :
ƒ ConnectionManager() {
babel_runtime_helpers_classCallCheck__WEBPACK_IMPORTED_MODULE_0___default()(this, ConnectionManager);
}
It seems that the final js module webpack contain the ConnectionManager class
It seems that you mix commonjs modules with ES modules by the wrong way.
There are a lot of modules (include node built-in) which have no default export. To import such a module you need to use * as moduleAlias or { exportedField } in your import statement. Try to rewrite your code by this way:
import * as fs from 'fs'
import * as typeorm from 'typeorm'
import { Public } from '../entity/Public'
export default class ConnectionManager
{
constructor(){}
getConnection(type, name, options) {
}
}
Because this class is exported as a default value, you can use the following construction to import it as a default field, where ConnectionManager is an alias for the current scope:
import ConnectionManager from '../service/connectionManager'

Angular6 :Property catch does not exist

I am new to Angular and I have basic knowledge of it. I want to learn HttpClient so I can create a json file instead of real server. I created a service and imported HttpClient:
service.ts
import { Injectable } from '#angular/core';
import {HttpClient, HttpErrorResponse} from '#angular/common/http';
import {IEmployee} from "../../../service/src/app/employee";
import {Observable} from "rxjs/index";
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';
In my class EmployeeService I have created a method for getting data from json file:
#Injectable({
providedIn: 'root'
})
export class EmployeeService {
private _url: string = "/assets/data/employees.json";
constructor(private http:HttpClient) { }
getEmployee():Observable<IEmployee[]> {
return this.http.get<IEmployee[]>(this._url)
.catch(this.errorHandler);
}
errorHandler(error: HttpErrorResponse) {
return Observable.throw(error.message || "Server Error")
}
}
But in getEmployee method I got these errors:
ERROR in ./src/app/employee.service.ts
Module not found: Error: Can't resolve 'rxjs/add/observable/throw' in 'E:\Tutorial\NodeJS\WebstormProjects\Angular\http\src\app'
ERROR in ./src/app/employee.service.ts
Module not found: Error: Can't resolve 'rxjs/add/operator/catch' in 'E:\Tutorial\NodeJS\WebstormProjects\Angular\http\src\app'
i 「wdm」: Failed to compile.
As you can see I have imported throw and catch operator but I do not know why I keep getting errors.
The other problem is, below throw method appear a line because of deprecated(Deprecated symbol used, consult docs for better alternative)!!
What is the alternative?
Angular CLI: 6.0.1
Node: 10.0.0
OS: win32 x64
Angular:
...
Package Version
------------------------------------------------------
#angular-devkit/architect 0.6.1
#angular-devkit/core 0.6.1
#angular-devkit/schematics 0.6.1
#schematics/angular 0.6.1
#schematics/update 0.6.1
rxjs 6.1.0
typescript 2.7.2
****************** EDIT ***************
I want to use builtin Observable in Angular yet and i do not want to use RXJS third party lib for angular.
This is my node module rx folder and you can see observable file in it.
And in node_modules\rxjs\operator folder there are throw and catch file..
But why it wants to search these files into E:\Tutorial\NodeJS\WebstormProjects\Angular\http\src\app folder that is make a error?
I fixed my problem by installing :
npm install --save rxjs#6 rxjs-compat#6
and use this path for rxjs:
import {Observable, Subject, asapScheduler, pipe, of, from, interval, merge, fromEvent, throwError} from 'rxjs';
import {catchError} from "rxjs/internal/operators";
Seems catch depricated at angular 6 so in order to i have used catchError like below :
getEmployee():Observable<IEmployee[]> {
return this.http.get<IEmployee[]>(this._url)
.pipe(
catchError(this.errorHandler));
}
errorHandler(error: HttpErrorResponse) {
return throwError(error.message || "Server Error")
}
And all errors gone now :-)
These below references are enough for you. remove unwanted references
import { Injectable } from '#angular/core';
import {HttpClient, HttpErrorResponse} from '#angular/common/http';
import {IEmployee} from "../../../service/src/app/employee";
import {Observable} from "rxjs/Observable";
Where,
removed these below references
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';
And changed "rxjs/Observable" ainstead of "rxjs/index";
Update:
Should check your rxjs folder having these files, if not, then your package has missed something. you need re-install it.
Import these References
import { throwError, Observable } from 'rxjs';
import {throwError as observableThrowError} from 'rxjs';
import {catchError} from 'rxjs/operators'
and then change your code below as
getEmployees():Observable<IEmployee[]> {
return this.http.get<IEmployee[]>(this._url).pipe(
catchError(this.errorHandler));
}
errorHandler(error: HttpErrorResponse) {
return observableThrowError(error.message ||"server error");
}
https://www.youtube.com/watch?v=ScaKGrW5s0I&list=PLC3y8-rFHvwhBRAgFinJR8KHIrCdTkZcZ&index=31
if you still not understand check above video link
ErrorObservable creates an Observable that emits no items to the Observer and immediately emits an error notification.
Just import like this
import { ErrorObservable } from 'rxjs/observable/ErrorObservable';
And create error
ErrorObservable.create('error');

How to export and use multiple custom modules in the same library with React Native

So I have a React Native custom library that I made that has 2 modules made, moduleA and moduleB. How do I export them so that I can call both of the modules in my project?
Before when I had only one module it would work perfectly like this:
//Index.js file of my library
import { NativeModules } from 'react-native';
const { moduleA } = NativeModules;
export default moduleA;
and then in my React native project I could call it like this
//Home.js file of my project
import moduleA from 'custom_library';
moduleA.method(); //Works fine
But now that I have two modules, I'm not sure how to change the modules and the import such that both can be used. Is it even possible? The end goal that I want to be able to do is
//Home.js file of my project
import { moduleA, moduleB } from 'custom_library';
moduleA.method();
moduleB.method();
Sorry for the basic question, but I'm getting frustrated that nothing I've tried is really working.
Just use the export keyword. You will find more detailed examples here.
index.js of custom_library
import { NativeModules } from 'react-native';
const { moduleA, moduleB } = NativeModules;
export { moduleA, moduleB };
home.js
import { moduleA, moduleB } from 'custom_library';
moduleA.method();
moduleB.method();

Angular 2 - Import html2canvas

I have installed html2canvas on my angular 2 project using npm install html2canvas --save. If I now go to any file and write import * as html2canvas from 'html2canvas' it gives the error:
Cannot find module 'html2canvas'
My package file looks like this:
{
...
"scripts": {
...
},
"dependencies": {
...
"html2canvas": "^0.5.0-beta4",
...
},
"devDependencies": {
...
}
}
The file on which I'm trying to import the html2canvas is:
import { Injectable } from '#angular/core';
import * as jsPDF from 'jspdf';
import * as html2canvas from 'html2canvas';
#Injectable ()
export class pdfGeneratorService {
...
}
Since Angular2 uses typescript, you need to install the typescript definition files for that module.
It can be installed from #types (if it exists). If it doesn't you can create your own definition file and include it in your project.
in angular 9 i use it this way:
import html2canvas from 'html2canvas';
....
html2canvas(this.head2print.nativeElement).then(_canvas => {
hdr = _canvas.toDataURL("image/png");
});
Also, the onrendered option for callback function may not work. Instead, you may use "then" as below:
html2canvas(document.body).then((canvas) => {
document.body.appendChild(canvas);
});
https://stackoverflow.com/a/45366038/3119507
Ran into the same issue running Angular 8. It still didn't work after installing the #types. What worked for me was to include the html2canvas library using require instead.
const html2canvas = require('../../../node_modules/html2canvas');
Then to take the screenshot:
#ViewChild('screenshotCanvas') screenCanvas: ElementRef;
html2canvas(this.screenCanvas.nativeElement).then(canvas => {
var imgData = canvas.toDataURL("image/png");
console.log("ENTER takeScreenshot: ",imgData )
document.body.appendChild(imgData);
})

Resources