mercurius-federation-info-graphiql-plugin
v0.3.16
Published
This is a graphiql plugin to display mercurius federation info.
Downloads
17
Readme
Mercurius Federation Info GraphiQL Plugin
A GraphiQL
extension to show information about federated schema,
which service is defining specific types and properties and which services are referencing them. Requires mercurius-federation-info
plugin, that provides the necessary api with the federation info
Services pane:
Displays a service tree and federation related directives (@key, @extends @external):
- list of services names
- list of types
- list of attributes
- list of types
Check the mercurius-federation-info
Github Repo for detailed information.
Schema pane:
Displays a table of GraphQL types showing which service defines it (Defined by column) and which service is extending it (Extended by) and what is using as key. Each object type has a sub-table listing its attributes:
- Input column shows if the attribute has input arguments
- Type shows what type the attribute is
- Owner service shows which service defines the attribute
- Referenced by shows which service is referencing it.
Quick start
This plugin is deployed as UMD to unpkg.com and is available
without a direct install in the GraphiQL
mercurius
integration.
import Fastify from 'fastify'
import mercuriusGateway from '@mercuriusjs/gateway'
import federationInfo, {
federationInfoGraphiQLPlugin
} from 'mercurius-federation-info'
const app = Fastify({ logger: true })
const schema = `type Query { add(x: Int, y: Int): Int }`
const resolvers = {
Query: {
async add(_, { x, y }) {
return x + y
}
}
}
app.register(mercuriusGateway, {
gateway: {
services: [
{
name: 'service1',
url: 'http://service1/graphql'
},
{
name: 'service2',
url: 'http://service2/graphql'
}
]
},
graphiql: {
enabled: true, // Enable GraphiQL
plugins: [federationInfoGraphiQLPlugin()] // Add Mercurius Federation Info GraphiQL Plugin
}
})
app.register(federationInfo, {
dependencies: ['mercurius']
})
app.listen({ port: 3000 })
Install in a custom GraphiQL App
The plugin can be installed also in a custom GraphiQL app.
Clone and run a sample Graphql server
git clone https://github.com/nearform/mercurius-federation-info
cd mercurius-federation-info
npm install
npm run example
A sample server runs on http://localhost:3001
.
Test it with:
curl http://localhost:3001
> {"status":"OK"}
Create the basic GraphiQL app
Create the app using Create React App and install the required modules.
npx create-react-app custom-graphiql
cd custom-graphiql
npm i graphql graphql-ws
npm i graphiql @graphiql/toolkit @graphiql/react
Replace the App.jsx
with the following content:
import React from 'react'
import { GraphiQL } from 'graphiql'
import { createGraphiQLFetcher } from '@graphiql/toolkit'
import 'graphiql/graphiql.css'
import '@graphiql/react/dist/style.css'
function App() {
const fetcher = createGraphiQLFetcher({
url: 'http://localhost:3001/graphql'
})
return (
<div
style={{
height: '100vh',
minWidth: '1080px',
width: '100vw',
overflow: 'scroll'
}}
>
<GraphiQL fetcher={fetcher} />
</div>
)
}
export default App
Run the app
npm start
and test it with the query:
{
me {
id
name
posts {
pid
title
content
}
}
}
Add the plugin
npm i mercurius-federation-info-graphiql-plugin
add the plugin to the code:
Import the plugin
...
import { federationInfoPlugin } from 'federation-info-plugin'
...
add it to the GraphiQL component
const federationSchemaUrl = 'http://localhost:3001/federation-schema'
const fetcher = createGraphiQLFetcher({
url: 'http://localhost:3001/graphql'
})
add the plugin to the GraphiQL component
...
<GraphiQL fetcher={fetcher} plugins={[federationInfoPlugin({ federationSchemaUrl })]} />
...
The final version of App.jsx
import React from 'react'
import { GraphiQL } from 'graphiql'
import { createGraphiQLFetcher } from '@graphiql/toolkit'
import 'graphiql/graphiql.css'
import '@graphiql/react/dist/style.css'
import { federationInfoPlugin } from 'federation-info-plugin'
function App() {
const federationSchemaUrl = 'http://localhost:3001/federation-schema'
const fetcher = createGraphiQLFetcher({
url: 'http://localhost:3001/graphql'
})
return (
<div
style={{
height: '100vh',
minWidth: '1080px',
width: '100vw',
overflow: 'scroll'
}}
>
<GraphiQL
fetcher={fetcher}
plugins={[federationInfoPlugin({ federationSchemaUrl })]}
/>
</div>
)
}
export default App
API
graphiqlFederationInfoPlugin
The plugin component should be added to the GraphiQL component in the plugins
list
<GraphiQL fetcher={fetcher} plugins={[federationInfoPlugin({ federationSchemaUrl })]}/>
Plugin Development
- Set up the server plugin as described above (server will bind to port 3001)
- Clone this repo
cd mercurius-federation-info-graphiql-plugin
npm run start
(call the server on 3001)
Design
A design refactoring of the plugin is planned to improve the user experience.
The figma
project with the definition can be found here
E2E Testing
To run Playwright tests locally:
npx playwright test
This will start the sample graphQL server and run the tests on Chrome.