graphql-kit / graphql-voyager

🛰️ Represent any GraphQL API as an interactive graph

Home Page:https://graphql-kit.com/graphql-voyager/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Using GraphQL Voyager without the endpoint

isha-talegaonkar opened this issue · comments

My project does not have a graphql endpoint as such, but a bunch of input graphql schema files that I am getting using an API. I need to visualize the file that I am getting as input. Is there any way to do so?

@isha-talegaonkar you can build an introspection from file and use it. If you check the demo, you can get some clues on how to make it.

Is this possible with the standalone version? It's probably easiest to use sdlToIntrospection and then give the result as introspection object to the init function....
But I guess sdlToIntrospection isn't exposed?!

@isha-talegaonkar you might need to provide more info regarding your project.

You can always build and dump a complete SDL or get an introspection.
Almost any library can do it.

Here is an example on how you can do this without an endpoint:

import {
    Source,
    parse,
    execute,
    buildSchema,
} from 'graphql'
import type {
    DocumentNode,
} from 'graphql'
import { Voyager, voyagerIntrospectionQuery } from 'graphql-voyager';


var schema = buildSchema(`
  type Account {
    Id: String
    Name: String
  }

  type Objects {
    Account: Account
  }

  type UIAPI {
    query: Objects
  }

  type Query {
    Account(Id: String): Account
    uiapi: UIAPI
  }
`)

async function retrieveDemoIntrospection(introspectionQuery){
    let documentAST: DocumentNode | undefined;
    try {
        //const params = await getGraphQLParams(request)
        documentAST = parse(new Source(introspectionQuery, 'GraphQL request'));
    } catch (syntaxError: unknown) {
        // Return 400: Bad Request if any syntax errors exist.
        //documentAST = new DocumentNode()
        throw new Error("failed")
    }

    return execute({
        schema,
        document: documentAST,
        rootValue: {},
        contextValue: {},
        variableValues: {},
        operationName: "IntrospectionQuery",
        fieldResolver: undefined,
        typeResolver: undefined,
    });
}

You can extend field and type resolver which can be very helpful when you schema is dynamic.