GraphQL Datasource

The GraphQL DataSource allows you to connect any compatible GraphQL Server. WunderGraph supports Queries, Mutations as well as Subscriptions.

Add a GraphQL DataSource

To add a GraphQL data source, edit wundergraph/wundergraph.config.ts and introspect the GraphQL server like the config below.

import type { WunderGraphConfig } from '@wundergraph/sdk';
import { graphql } from '@wundergraph/sdk/datasources';
 
const countries = graphql({
	namespace: 'countries',
	url: 'https://countries.trevorblades.com/',
});
 
export default {
	datasources: [countries],
} satisfies WunderGraphConfig;

The GraphQL data source is now added to your virtual graph and you can now write operations against it.

# Get all countrie names
query {
	countries_countries {
		name
	}
}

💡

We recommend always using a namespace, as this will make sure to prevent any naming conflicts in the schema and generated types.

Authenticated GraphQL APIs

If you need to authenticate against your GraphQL API, you can use the introspection option to add custom headers to your requests.

const github = graphql({
	namespace: 'github',
	url: 'https://api.github.com/graphql',
	introspection: {
		headers(builder) {
			return builder.addStaticHeader('Authorization', `Bearer ${process.env.GITHUB_TOKEN}`);
		},
	},
});

To forward the Authorization header from the client to the upstream or set static headers, you can use the headers option.

const github = graphql({
	namespace: 'github',
	url: 'https://api.github.com/graphql',
	headers(builder) {
		return (
			builder
				// We forward `X-Github-Token` to the `Authorization` header.
				.addClientRequestHeader('Authorization', 'X-Github-Token')
				// Add a static header
				.addStaticHeader('X-Github-Next-Global-ID', '1')
		);
	},
});

The X-Github-Token header will be forwarded from the client to the upstream, while the X-Github-Next-Global-ID header will be added to every request.

Learn more

Prisma GraphQL Federation