We're excited to announce the release of WPML GraphQL, a new glue plugin that bridges WPML and WPGraphQL, enabling multilingual support within the GraphQL schema.<\/p>\n\n\n\n
Designed for developers using Gatsby, React, Vue, and other popular front-end technologies, WPML GraphQL is the optimal solution for creating headless WordPress websites in multiple languages.<\/p>\n\n\n\n
What is Headless WordPress?<\/h2>\n\n\n\n
In simple terms, "headless WordPress\u201d, refers to a setup where WordPress works behind the scenes while you employ a separate technology for the front-end. <\/p>\n\n\n\n
Sometimes, you need to build a completely custom front-end application without the need to follow the WordPress template and URL hierarchy. In other words, you don't want to be restricted by how WordPress themes work, you want to build your own front-end.<\/p>\n\n\n\n
However, you can still use WordPress for all your content creation and editing needs.<\/p>\n\n\n\n
Now, all you need is a way to easily deliver data from the WordPress backend to whatever front-end technology you're using. This is where WPGraphQL comes in. It allows you to selectively retrieve the exact content element you need for each part of your front-end.<\/p>\n\n\n\n
Finally, WPML GraphQL is the magic ingredient that lets you get language data and translations from the WPML plugin. This enables you to build a customized, headless WordPress site that is multilingual.<\/p>\n\n\n\n
\n
Recommended Development Stack for Building Headless WordPress Sites<\/h3>\n<\/div><\/div>\n\n\n\n
\n
\n
\n
Front-end<\/h4>\n<\/div>\n\n\n\n
\n
\n
\n
<\/div>\n<\/div>\n\n\n\n
\n
Gatsby<\/p>\n\n\n\n
Front-end framework for building the user-facing application or site<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
\n
<\/div>\n<\/div>\n\n\n\n
\n
Gatsby Add-on for WordPress<\/p>\n\n\n\n
gatsby-source-wordpress<\/strong> add-on allows Gatsby to get data from your WordPress backend<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
Back-end<\/h4>\n<\/div>\n\n\n\n
\n
\n
\n
<\/div>\n<\/div>\n\n\n\n
\n
WordPress<\/p>\n\n\n\n
For all your content management needs, you only use the backend<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
\n
<\/div>\n<\/div>\n\n\n\n
\n
WPGraphQL plugin for WordPress<\/p>\n\n\n\n
Adds GraphQL support to WordPress<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
\n
<\/div>\n<\/div>\n\n\n\n
\n
WPML GraphQL plugin for WordPress<\/p>\n\n\n\n
Enables multilingual features within the GraphQL schema<\/p>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n
\n
\n
\n
<\/div>\n<\/div>\n\n\n\n
\n
WPGatsby plugin for WordPress<\/p>\n\n\n\n
Optional, but depending on your needs might come in handy<\/p>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n
Enhanced Capabilities with WPML GraphQL<\/h2>\n\n\n\n
WPML GraphQL integrates with WPGraphQL and adds new fields and filters to the GraphQL schema. After installing the plugin, you can navigate to GraphQL \u2192 GraphQL IDE<\/strong> and use the Query Composer<\/strong> to query and filter content in multiple languages.<\/p>\n\n\n\n
In the screenshot below, you can see how easy it is to use the language<\/strong> field to retrieve a list of all posts on a WordPress site, including their language code, slug, and URI. You can also use the translations<\/strong> field to get similar information for the translations of each post:<\/p>\n\n\n
![\"\"](\"https:\/\/wpml.org\/wp-content\/uploads\/2023\/05\/wpml-graphql-query-composer-1.png\")
<\/a>