Angular integration

[Charius]

Is there any way to integrate this incredible tool into angular project?

I mean there is some info about integration into react project, but nothing about angular

[IvanGoncharov]

@Charius I personally never used Angular so I can't answer this question.
If you find a working solution I would happily merge PR that adds Angular section to the README.md.

[RomanHotsiy]

It can't be used without React as it is a React component.

But it can be used with Angular the same way as any other React component can be used with Angular, e.g. you can use ReactDOM.render in Angular component AfterViewInit hook:

import { Component } from '@angular/core';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Voyager } from 'graphql-voyager';


function introspectionProvider(query) {
  // ...
}

@Component({
  //...
})
export class VoyagerWrap {
  constructor(private elRef:ElementRef) {}
  ngAfterViewInit() {
    ReactDOM.render(
      React.createElement(
        Voyager, 
        { introspection: introspectionProvider }
      ),
      this.elRef.nativeElement
    );
  }
}

I haven't tested this code. Let us know if you manage to setup it sucessfully. As @IvanGoncharov noted above it would be great to add Angular section to README.

[Charius]

@RomanGotsiy thanks, will try to integrate to simple angular project. If there will be success I'll post some code here or link to repo

[Charius]

got some kind of luck, but it seems to be worker.js config required, and I'm kinda stuck here

[RomanHotsiy]

what the worker.js config? Does it throw any error? Maybe I can help

[Charius]

the very first error message posts in console GET http://localhost:4200/voyager.worker.js 404 (Not Found)

I know that I can configure workerURI or loadWorker when call React.createElement, and I need to figure out how can I import voyager.worker.js into wrapper component and then return it via Promise inside loadWorker callback

[Charius]

I guess I should try add worker file in angular.json or just use require to obtain it from dist directory

[RomanHotsiy]

@Charius you can try adding worker to assets files in angular.json and then configure location via workerURI OR you can try using file-loader, like this:

const myWorkerURI = require('file-loader!graphql-voyager/dist/voyager.worker.js');

file-loader should emit file to dist directory and you'll get URI in myWorkerURI.
Haven't tested it though

[Charius]

Yes, file-loader helped. @RomanGotsiy thank you. Hope to share some simple angular app example soon. But I'm still interested in angular.json configuration and will try to dig into it

[Charius]

And btw while doing all this stuff I faced with the problem from graphql/graphql-js#1344 so now project is on bleeding edge, waiting for release 😃

[NewToStuff]

Hi,
I am working on the same thing. I want to embed a GraphQL documentation viewer of some description into an Angular environment. Graphql-voyager is by far the best viewer I have seen so far.

I have got stuck on the voyager.worker.js error. I am not sure where the
const myWorkerURI = require('file-loader!graphql-voyager/dist/voyager.worker.js');
fix should be applied. What worked for you @Charius ?
Thanks

[NewToStuff]

As way of update I am still getting the error.
zone.js:1050 GET http://localhost:4200/voyager.worker.js 404 (Not Found)
In the console.

I think the issue is that the voyager.worker.js file is not being copied across when I run ng serve.

I tried creating a webpack.conf.js in the root folder and put the following in it with no success;

module.exports = require('graphql-voyager/dist/voyager.worker.js');

If anyone has any hints it would be really appreciated.

[NewToStuff]

To help on the documentation for the Angular section I had to change the first line of @RomanGotsiy s code to the following as ElementRef needs to be imported.

import { Component, ElementRef } from '@angular/core';

Still stuck on the voyager.worker bit though

[Charius]

@NewToStuff Hi there!

In the result about wrapper for voyager I've got something like this:

The component file:

import { AfterViewInit, Component, ElementRef, OnInit } from '@angular/core';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Voyager } from 'graphql-voyager';
import { introspectionProvider } from 'src/app/voyager/introspection-provider';

declare var require: any;
const voyagerWorkerURI = require('file-loader!graphql-voyager/dist/voyager.worker.js');

@Component({
  selector: 'app-voyager-wrapper',
  templateUrl: './wrapper.component.html',
  styleUrls: ['./wrapper.component.scss']
})
export class WrapperComponent implements OnInit, AfterViewInit {

  constructor(private elementRef: ElementRef) { }

  ngOnInit() { }

  ngAfterViewInit() {
    ReactDOM.render(
      React.createElement(
        Voyager,
        {
          introspection: introspectionProvider,
          workerURI: voyagerWorkerURI
        }
      ),
      this.elementRef.nativeElement);
  }

}

angular.json in projects => %project_name% => architect => build => options

...
"styles": [
  "src/styles.scss",
  "node_modules/graphql-voyager/dist/voyager.css"
],

introspectionProvider is just a function that returns result of fetch introspection request to api

[NewToStuff]

Thanks @Charius that is really helpful. Got myself confused about how you have set up the introspectionProvider function. It is in a separate typeScript file? How does the structure look?

[RomanHotsiy]

@NewToStuff @Charius it is not recommended to import introspectionProvider from the package as it is internal and may be removed/renamed/moved in the future.

Just write your own, e.g.:

function introspectionProvider(query) {
  return fetch('<GraphQL endpoint URL here>', {
    method: 'post',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({query: query}),
  }).then(response => response.json());
}

[NewToStuff]

Thanks @Charius @RomanGotsiy . I am having a "brain fade" as all my application is in classes and I don't have isolated functions like this. When I am doing the import for the typeScript file which just contains the function above it is complaining that the file being imported is not a module. I will try to get the bottom of it..

[Charius]

@RomanGotsiy I've wrote own provider function, and import is from my file. Anyway thanks for clarification.
P.S. voyager is a great tool!

[NewToStuff]

Thanks @Charius @RomanGotsiy . I got this working in the end getting the query result from a Service I established. I ended up sorting the voyager.worker.js issue by adding the following to the assets section within angular-cli.json

    {
      "glob": "voyager.worker.js",
      "input": "../node_modules/graphql-voyager/dist",
      "output": "./"
    },

Looking forward to using this awesome tool.

Thanks

Paul