https://github.com/yarinvak/graphql-vision

a dashboard & server for handling tracing results sent by a graphql endpoint
https://github.com/yarinvak/graphql-vision

Last synced: 20 days ago
JSON representation

a dashboard & server for handling tracing results sent by a graphql endpoint

• Host: GitHub
• URL: https://github.com/yarinvak/graphql-vision
• Owner: yarinvak
• License: mit
• Created: 2019-08-26T20:21:15.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2022-12-11T10:55:36.000Z (almost 2 years ago)
• Last Synced: 2024-10-12T13:27:45.489Z (about 1 month ago)
• Language: TypeScript
• Size: 1.78 MB
• Stars: 7
• Watchers: 1
• Forks: 0
• Open Issues: 11
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        


# graphql-vision

![npm](https://img.shields.io/npm/v/graphql-vision)

![Node CI](https://github.com/yarinvak/graphql-vision/workflows/Node%20CI/badge.svg?branch=master)

a dashboard & server for handling tracing results sent by a graphql endpoint

## Getting Started

### Listener Service

You have to create the listener service (with a dashboard) in a new project.

run `npm i --save graphql-vision` in your listener project.

in your index.ts file:

```javascript

    import VisionServer from 'graphql-vision';

    const visionServer = new VisionServer();

    visionServer.run({port: 4000, dbOptions: {

        type: "postgres",

        host: "localhost",

        port: 5432,

        username: "postgres",

        password: "postgres",

        database: "apollo-tracing"

    }});

```

- The `port` argument stands for the port that the vision server will be running on.

- The `dbOptions` argument stands for the type-orm configurations. The vision server requires a DB for saving the tracing results.

It will create a listener server with a graphql endpoint and a dashboard.

### Your GraphQL Service

You have to configure your graphql service to send the apollo tracing objects to the listener service.

You can use the simpler way, using the [graphql-vision-plugin](https://github.com/yarinvak/graphql-vision-plugin), or the manual way:

For example, we configured our graphql service (created by apollo server):

```javascript

const trace = `mutation($tracing: TracerInput) {

  addTracing(tracing: $tracing)

}`;

const server = new ApolloServer({

    typeDefs, resolvers, tracing: true, plugins: [{

        requestDidStart({}){

            return {

                willSendResponse({response}){

                    request('http://localhost:4000/graphql', trace, {tracing: response.extensions.tracing}).then(()=>{

                        console.log('success');

                    });

                }

            }

        }

    }]

});

```

The `tracing:true` makes apollo server to return apollo tracing in response's extensions. Then we send these objects to the listener service created earlier, with url `http://localhost:4000/graphql`.

## How to work on project

- Clone the repository

- `npm i`

- `cd src/dashboard && npm i`

You can now run the example project with the following command:

- `npm run example`