I am working with NestJS and Apollo Federation for a while and it seems that since last update I get
"(node:19113) DeprecationWarning: 'buildFederatedSchema' is deprecated. Use 'buildSubgraphSchema' instead."
I don't see a place where I could use buildSubgraphSchema and I didn't find anywhere from NestJS docs of Apollo Federation docs a way to remove this deprecated issue.
The full list of dependencies in my package json are
"dependencies": {
"#apollo/federation": "^0.33.3",
"#apollo/subgraph": "^0.1.2",
"#nestjs/common": "^8.0.0",
"#nestjs/config": "^1.0.2",
"#nestjs/core": "^8.0.0",
"#nestjs/graphql": "^9.1.1",
"#nestjs/mongoose": "^9.0.1",
"#nestjs/platform-express": "^8.0.0",
"apollo-server-express": "^3.4.0",
"class-transformer": "^0.4.0",
"class-validator": "^0.13.1",
"graphql": "^15.6.1",
"helmet": "^4.6.0",
"joi": "^17.4.2",
"mongoose": "^6.0.12",
"reflect-metadata": "^0.1.13",
"rimraf": "^3.0.2",
"rxjs": "^7.2.0"
},
The GraphQL module is defined in a file called graphql.module.ts with the following:
import { Module } from '#nestjs/common';
import { GraphQLFederationModule } from '#nestjs/graphql';
import { ApolloServerPluginInlineTraceDisabled } from 'apollo-server-core';
#Module({
imports: [
GraphQLFederationModule.forRoot({
plugins: [ApolloServerPluginInlineTraceDisabled()],
autoSchemaFile: true,
playground: true,
introspection: true,
buildSchemaOptions: {
dateScalarMode: 'isoDate',
},
context: ({ req }) => ({
jwt: req.headers.authorization,
}),
}),
],
})
export class GraphqlModule {}
Project still runs normally with the deprecated message but I would be keen to understand how to fix it.
Thanks in advance,
SOLUTION: 2020-03-10
Based on Brando J answer, the next update of nestjs/graphql from version 9 to version 10 fix the issue
The cause of this warning comes from #nestjs/graphql v9 which still use "buildFederatedSchema" from #apollo/federation.
You can update to #nestjs/graphql v10 to get rid of that message. Also GraphQLFederationModule has been removed and replaced by GraphQLModule using ApolloFederationDriver.
tl;dr
update #nestjs/graphql to v10
read this docs to adjust your code to new version https://docs.nestjs.com/graphql/migration-guide
Related
I am using Laravel 5.8 with inbuilt vue.js component and socket.io without using redis and laravel-echo-server
npm installation
npm install vue-socket.io
resources/js/app.js file in Laravel
import VueSocketio from 'vue-socket.io';
Vue.use(VueSocketio);
There is no error when compiled using npm run watch command. When I check the output in browser, there is following error.
Cannot call a class as a function
Issue comes in this line: Vue.use(VueSocketio);
Can you please suggest?
Below is Package.json file
"devDependencies": {
"axios": "^0.18",
"bootstrap": "^4.1.0",
"cross-env": "^5.1",
"jquery": "^3.2",
"laravel-mix": "^4.0.7",
"lodash": "^4.17.5",
"popper.js": "^1.12",
"resolve-url-loader": "^2.3.1",
"sass": "^1.15.2",
"sass-loader": "^7.1.0",
"vue": "^2.5.17",
"vue-template-compiler": "^2.6.10",
"vue-vpaginator": "^1.0.0"
},
"dependencies": {
"bootstrap-vue": "^2.0.0-rc.24",
"vee-validate": "^2.2.11",
"vue-chat-scroll": "^1.3.5",
"vue-recaptcha": "^1.2.0",
"vue-socket.io": "^3.0.7",
"vuejs-dialog": "^1.4.0"
}
Node.js side code. This is a complete different working directory from Laravel
const express = require("express");
class Server {
constructor() {
this.app = express();
this.port = process.env.PORT || 89;
this.host = process.env.HOST || `192.168.43.173:89`;
}
includeRoutes() {
}
appExecute() {
var server = this.app.listen(this.port, () => {
console.log(`Listening on http://${this.host}`);
});
}
}
const server = new Server();
server.appExecute();
Update code as per suggested by Javas
Vue.use(new VueSocketio({
debug: true,
connection: 'http://192.168.43.173:89',
}));
You should add a new keywoard before VueSocketio.
Vue.use(new VueSocketio({}));
Don't forget to specify a list of options.
I am executing unit tests for angular projects but I got error
'Uncaught ReferenceError: Zone is not defined'
in Jasmine and Karma. Currently I using angular 6.
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~1.7.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.0",
"karma-jasmine": "~1.1.1",
"karma-jasmine-html-reporter": "^0.2.2",
"typescript": "2.7.2",
Uncaught ReferenceError: Zone is not defined
at :9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-testing.js:85
at :9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-testing.js:9
at Object. (:9876/_karma_webpack_/webpack:/node_modules/zone.js/dist/zone-testing.js:12)
at Object../node_modules/zone.js/dist/zone-testing.js (zone-testing.js:1584)
at webpack_require (:9876/_karma_webpack_/webpack:/webpack/bootstrap:76)
at Object../src/test.ts (:9876/_karma_webpack_/webpack:/src/test.ts:3)
at webpack_require (:9876/_karma_webpack_/webpack:/webpack/bootstrap:76)
at checkDeferredModules (:9876/_karma_webpack_/webpack:/webpack/bootstrap:43)
at :9876/_karma_webpack_/webpack:/webpack/bootstrap:134
at bootstrap:134
I had the same issue in Angular 9.
I've added some imports and one polyfill for window to "test.ts" file. Below the full file.
// This file is required by karma.conf.js and loads recursively all the .spec and framework files
import 'zone.js/dist/zone';
import 'zone.js/dist/long-stack-trace-zone';
import 'zone.js/dist/proxy';
import 'zone.js/dist/sync-test';
import 'zone.js/dist/jasmine-patch';
import 'zone.js/dist/async-test';
import 'zone.js/dist/fake-async-test';
import 'zone.js/dist/zone-testing';
import { getTestBed } from '#angular/core/testing';
import {
BrowserDynamicTestingModule,
platformBrowserDynamicTesting
} from '#angular/platform-browser-dynamic/testing';
(window as any).global = window;
declare const require: {
context(path: string, deep?: boolean, filter?: RegExp): {
keys(): string[];
<T>(id: string): T;
};
};
// First, initialize the Angular testing environment.
getTestBed().initTestEnvironment(
BrowserDynamicTestingModule,
platformBrowserDynamicTesting()
);
// Then we find all the tests.
const context = require.context('./', true, /\.spec\.ts$/);
// And load the modules.
context.keys().map(context);
I do not know if this is still an issue, but if everything seems fine and it still does not work, try the following in the karma.conf.js file:
config.set({... files: ['node_modules/zone.js/dist/zone.js'] });
For further info, see this link:
Link
go through below link, it would be helpful for you.
https://github.com/angular/zone.js/issues/776
module.exports = function (config) {
config.set({
basePath: '../',
frameworks: ['jasmine', '#angular/cli'],
plugins: [
require('karma-jasmine'),
require('karma-chrome-launcher'),
require('karma-jasmine-html-reporter'),
require('karma-coverage-istanbul-reporter'),
require('#angular/cli/plugins/karma')
],
Well I have a Laravel Vue setup.
Package.json
{
"devDependencies": {
"axios": "^0.15.3",
"babel-preset-es2015": "^6.24.1",
"bootstrap": "4.0.0-beta",
"cross-env": "^3.2.3",
"jquery": "^3.1.1",
"laravel-mix": "1.2.0",
"lodash": "^4.17.4",
"vue": "^2.4.2"
},
"dependencies": {
"favico.js": "^0.3.10",
"intersection-observer": "^0.5.0",
"laravel-echo": "^1.3.2",
"moment-timezone": "^0.5.14",
"popper.js": "^1.12.2",
"pusher-js": "^4.2.1",
"sweetalert2": "^6.6.8",
"vue-image-crop-upload": "^1.3.15",
"vue-moment": "^2.0.2",
"vue-multiselect": "2.0.2",
"vue-observe-visibility": "^0.3.1",
"vue-switches": "^1.1.7",
"vue-template-compiler": "^2.4.2"
}
}
I am trying to integrate GTM. I could have used vue-gtm but since I am not using vue-router Its really hard to configure. I am using Laravel routes.
Any solutions to integrate it?
If anyone know how to integrate spatie/laravel-googletagmanager with vue .. Please help me out.
vue-gtm does not require the router. it just automates it and makes it easier, it doesn't mean you have to do this.
import VueGtm from 'vue-gtm';
import VueRouter from 'vue-router';
const router = new VueRouter({ routes, mode, linkActiveClass });
Vue.use(VueGtm, {
id: 'GTM-xxxxxxx', // Your GTM ID
enabled: true, // defaults to true. Plugin can be disabled by setting this to false for Ex: enabled: !!GDPR_Cookie (optional)
debug: true, // Whether or not display console logs debugs (optional)
vueRouter: router, // Pass the router instance to automatically sync with router (optional)
ignoredViews: ['homepage'] // If router, you can exclude some routes name (case insensitive) (optional)
});
You can completely disregard adding the vueRouter and ignoredViews parameters above.
Then in your components that need to dispatch events:
this.$gtm.trackEvent({
event: null, // Event type [default = 'interaction'] (Optional)
category: 'Calculator',
action: 'click',
label: 'Home page SIP calculator',
value: 5000,
noninteraction: false // Optional
});
You can figure that function on any action. Page load, click, form submission, etc. Just change the properties to meet your needs.
I've been trying to get Jest working with RxJS and am having trouble with Jest not propagating errors from inside the subscribe callback.
Here is a sample test I've tried that is not working:
import {of} from 'rxjs';
test('should fail', () => {
of(false).subscribe(val => {
expect(val).toBe(true);
});
});
The above test should fail, but it passes. I've googled around and found the following solution:
Failing expect() inside subscribe() does not mark test as invalid
This suggests using the "done" syntax in jest to solve the issue. While using the "done" callback does get the above test to fail, there are a number of issues with this approach:
Undescriptive errors
The test fails because the 'expect' call in subcribe() throws an error, resulting in 'done()' never getting called. The test then times out, waiting for done. So instead of propagating the 'expect' error, it is causing a timeout error, which means every test that fails in the expect clause will show a timeout error instead of the actual error message of the failed 'expect' call.
Tests take longer to fail
Because all tests are failing due to a timeout error, that means it takes 5 seconds for each test to fail (async tests timeout after 5 seconds). This can dramatically increase the amount of time for tests to run
Poor use of done
The done callback is meant to support asynchronous use cases for testing. But rxjs is not necessarily asynchronous. The code I inlined above actually runs synchronously. For example, the following test will pass:
import {of} from 'rxjs';
test('should pass', () => {
let didRunSynchronously = false;
of(true).subscribe(() => {
didRunSynchronously = true;
});
expect(didRunSynchronously).toBe(true);
});
It seems strange to have to use asynchronous semantics to solve a problem for a synchronous test.
Wondering if anyone has come up with a good solution for testing in rxjs that will result in the expect calls to properly get handled by the testing library.
Thanks in advance!
Relevant dependencies in package.json:
"dependencies": {
"#babel/polyfill": "^7.0.0",
"classnames": "^2.2.6",
"history": "^4.7.2",
"json-stringify-pretty-compact": "^1.2.0",
"minimist": "^1.2.0",
"normalize.css": "^8.0.0",
"nullthrows": "^1.1.0",
"react": "^16.5.2",
"react-dom": "^16.5.2",
"react-router-dom": "^4.3.1",
"rxjs": "^6.3.3",
},
"devDependencies": {
"#babel/core": "^7.2.2",
"#babel/plugin-proposal-class-properties": "^7.1.0",
"#babel/plugin-proposal-object-rest-spread": "^7.0.0",
"#babel/preset-env": "^7.1.0",
"#babel/preset-flow": "^7.0.0",
"#babel/preset-react": "^7.0.0",
"babel-core": "^7.0.0-bridge.0",
"babel-env": "^2.4.1",
"babel-eslint": "^10.0.1",
"babel-jest": "^23.6.0",
"babel-loader": "^8.0.4",
"copy-webpack-plugin": "^4.5.3",
"css-loader": "^1.0.0",
"eslint": "^5.9.0",
"eslint-plugin-flowtype": "^3.2.0",
"eslint-plugin-import": "^2.14.0",
"eslint-plugin-react": "^7.11.1",
"eslint-watch": "^4.0.2",
"flow-bin": "^0.83.0",
"html-webpack-plugin": "^3.2.0",
"jest": "^23.6.0",
"prettier": "^1.15.3",
"style-loader": "^0.23.1",
"webpack": "^4.20.2",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.9"
}
.babelrc file
{
"plugins": [
"module:#babel/plugin-proposal-class-properties",
"module:#babel/plugin-proposal-object-rest-spread"
],
"presets": [
["module:#babel/preset-env", { "targets": { "node": "6.10" } }],
"module:#babel/preset-flow"
]
}
Even if i am some years later on this topic, this might help others that are new to testing async code.
Please refer for example to https://jestjs.io/docs/asynchronous and use a done() callback at the end of your subscription.
If this callback is not executed, because of the error before, the test will fail as expected.
it('should fetch the right data', done => {
fetchData().subscribe(data => {
expect(data).toBe('expected data');
done();
});
});
Figured out the problem! Leaving this here for anyone who runs into a similar issue. RxJS and Jest were working properly and propagating the errors correctly. The problem was that I added a "jest.useFakeTimers" call to the testing script. For some reason, this was causing the errors not to propagating properly in the test. I needed to add "jest.runAllTimers" to get the errors to throw. Here is the full test script, implemented correctly:
import {of} from 'rxjs';
jest.useFakeTimers();
test('should fail', () => {
of(false).subscribe(val => {
expect(val).toBe(true);
});
jest.runAllTimers();
});
If you don't need mock timers, then no need to add them. I thought it was a bit strange that fake timers were an issue even though I could verify the code was getting called synchronously. If someone has more insight on the implementation details of why this is the case, I'd appreciate some explanation.
My library project uses...
Typescript
Rollup
D3
#types/d3
The package.json file has these dependencies
"dependencies": {
"#types/d3": "^4.4.0" /* also tried moving this to devDeps */
},
"devDependencies": {
"cssnano": "^3.10.0",
"postcss-cssnext": "^2.9.0",
"postcss-nested": "^1.0.0",
"postcss-simple-vars": "^3.0.0",
"rollup": "^0.40.1",
"rollup-plugin-commonjs": "^7.0.0",
"rollup-plugin-livereload": "^0.4.0",
"rollup-plugin-node-resolve": "^2.0.0",
"rollup-plugin-postcss": "^0.2.0",
"rollup-plugin-serve": "^0.1.0",
"rollup-plugin-typescript": "^0.8.1",
"rollup-plugin-uglify": "^1.0.1",
"rollup-watch": "^3.1.0"
}
My rollup.config.js file has these plugins configured...
plugins: [
typescript(),
postcss({
extension: ['.css'],
plugins: [
simplevars(),
nested(),
cssnext({ warnForDuplicates: false }),
cssnano(),
],
}),
nodeResolve({
jsnext: true, //use jsnext if the node package supports it
main: true, //look for main file
browser: true, //if there is a browser version, use it
}),
commonjs(),
//uglify(),
serve({
contentBase: 'build',
port: '80',
}),
livereload(),
]
Rollup builds it fine. However, in the editor, VSCode displays an error on the d3 symbol. When I hover over it I see this error...
[ts] 'd3' refers to a UMD global, but the current file is a module. Consider adding an import instead.
I can add this import to make the error go away in the editor.
import d3 from '#types/d3';
However, then rollup fails with...
Could not resolve '#types/d3' from '...'
Is there a way to configure vscode to not show that error, so it doesn't drown out real errors?
Is there an alternative way to configure D3 type definitions in a rollup project?
You only have the TypeScript typings for d3 defined. You still need to specify d3 as dependency.
package.json
"dependencies": {
"#types/d3": "4.8.0",
"d3": "4.8.0"
}
You can now import d3:
import * as d3 from "d3";