I am using the laravel backend side and put graphql on the server, with which I can make queries from the graphical interface. Now it's time to send the queries from the frontend (Angular7) to laravel, but there's no way. From the beginning I used angular 5.2.9, and it gave me object problems when I entered the watchQuery (there seems to be lost - the concrete error was Object is not a function). If I did an apollo console.log, it would take me out of the watchQuery method, but it would not respond. I read that it could be that the version of angular could be giving problems (among others how to download versions), then I decided to migrate to version 7, and now the error that brings me is this:
Error: "Network error: Http failure response for (unknown url): 0 Unknown Error "
This is the error that gives me:
I pass what I have done on the client's side - package.json:
<code>
"dependencies": {
"@angular-devkit/core": "^0.6.8",
"@angular/animations": "7.1.4",
"@angular/common": "7.1.4",
"@angular/compiler": "7.1.4",
"@angular/core": "7.1.4",
"@angular/forms": "7.1.4",
"@angular/platform-browser": "7.1.4",
"@angular/platform-browser-dynamic": "7.1.4",
"@angular/router": "7.1.4",
"apollo-angular-boost": "^1.4.0",
"apollo-angular-link-http": "^1.1.0",
"apollo-boost": "^0.1.23",
"apollo-cache-inmemory": "^1.2.2",
"apollo-client": "^2.3.2",
"apollo-link": "^1.2.2",
"core-js": "^2.5.4",
"graphql": "^0.11.7",
"graphql-tag": "^2.10.0",
"marked": "^0.3.9",
"rxjs": "^6.2.1",
"rxjs-compat": "^6.0.0-rc.0",
"tslib": "^1.9.0",
"zone.js": "^0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.11.0",
"@angular/cli": "^7.1.4",
"@angular/compiler-cli": "7.1.4",
"@angular/language-service": "7.1.4",
"@types/jasmine": "~2.5.53",
"@types/jasminewd2": "~2.0.2",
"@types/node": "^9.4.0",
"apollo-codegen": "^0.20.2",
"codelyzer": "^4.0.1",
"jasmine-core": "~2.6.2",
"jasmine-spec-reporter": "~4.1.0",
"karma": "~1.7.0",
"karma-chrome-launcher": "~2.1.1",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^1.2.1",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"pre-commit": "^1.2.2",
"protractor": "~5.1.2",
"ts-node": "~4.1.0",
"tslint": "~5.9.1",
"typescript": "3.1.6"
}
</code>
The graphql module, to connect to laravel
and of course I'm putting it in the app module:
<code>
import { NgModule } from "@angular/core";
import { HttpClientModule } from "@angular/common/http";
// Apollo
import { ApolloModule, Apollo } from "apollo-angular";
import { HttpLinkModule, HttpLink } from "apollo-angular-link-http";
import { InMemoryCache } from "apollo-cache-inmemory";
@NgModule({
exports: [HttpClientModule, ApolloModule, HttpLinkModule]
})
export class GraphQLModule {
constructor(apollo: Apollo, httpLink: HttpLink) {
apollo.create({
link: httpLink.create({ uri: "http://localhost:8000/graphql-ui" }),
cache: new InMemoryCache()
});
}
}
</code>
This is a small example to obtain the devices. I have also used this.apollo.query because I have seen in some cases that they also spend that syntax, but I also got the same error.
<code>
import { Apollo} from 'apollo-angular';
import gql from 'graphql-tag';
this.apollo
.watchQuery({ query: gql'
{
devices {
data {
description
}
}
}
', })
.valueChanges.subscribe(result => {
console.log(result);
});
</code>
By the way, in the cors de laravel I have everything allowed:
<code>
'supportsCredentials' => false,
'allowedOrigins' => ['*'],
'allowedHeaders' => ['*'],
'allowedMethods' => ['*'],
'exposedHeaders' => [],
'maxAge' => 864000,
</code>
I do not know why it does not appear * in origins and headers, but it is.
This is the graphql web interface for queries from laravel, which does work: