Problem GraphQl Angular 7 - Laravel

0

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:

    
asked by Jomondo 23.12.2018 в 13:46
source

0 answers