Skip to content

Connecting a data source

To pull content from WordPress, Strapi, or any GraphQL API into Silex, you need to add a data source. This page walks through the settings dialog.

Opening data source settings

In the Silex editor:

  1. Open Settings (the gear icon in the left bar, or Alt+S)
  2. Open the CMS tab
  3. Click Add Your First Data Source, or the + button next to Data Sources

A dialog opens with fields for the API connection. It has two steps: the connection (label, URL, headers), then the backend type.

Filling in the basics

Label — A name for this data source (e.g., "My WordPress Site"). This is only for you in the editor; users never see it.

URL — The GraphQL endpoint. Examples:

  • WordPress: https://yoursite.com/graphql
  • Strapi: https://yoursite.com/graphql
  • Supabase: https://yourproject.supabase.co/graphql/v1 (see Supabase setup)

Check your API provider's documentation for the exact endpoint URL.

Click Next once the URL and the headers are filled in. Silex connects to the API and reads its schema, then shows the second step.

Backend type — In the second step, select which platform you're connecting to:

  • WordPress — optimizes for WordPress/WPGraphQL structure
  • Strapi — optimizes for Strapi
  • Supabase — optimizes for Supabase
  • Generic — for any other GraphQL API

This selection helps Silex provide smart defaults and better type hints. If your API isn't in the list, choose Generic.

The Add Data Source dialog showing backend type options: GraphQL, WordPress, GitLab, Strapi, and Supabase

Adding authentication headers (if needed)

Some APIs require authentication. If your API is password-protected or requires an API key:

  1. In the data source dialog, open HTTP Headers
  2. Click Add a header
  3. Enter the header name (usually Authorization)
  4. Enter the header value (usually a token or API key)

Example for WordPress with private content: 

Header: Authorization
Value: Bearer YOUR_JWT_TOKEN

Ask your WordPress admin or API provider for the correct header format.

Testing the connection

After filling in the URL and headers:

  1. Click Next
  2. Silex fetches the schema from your API
  3. If it works, the second step opens: choose the backend type and click Apply. The data source shows Connected in the CMS tab
  4. If it fails, an error message shows under the form: check the URL and headers

Later, the Test button next to a data source checks the connection again.

The CMS settings tab showing a connected WordPress data source with its GraphQL endpoint URL and "Connected" status

Common errors:

  • "Connection refused" — the URL is wrong or the API is down
  • "Unauthorized" — your headers/authentication is missing or incorrect
  • "CORS error" — your API doesn't allow requests from Silex's domain (the API provider needs to configure this)

Browsing available types

Once connected, you see a list of Types — the data structures your API offers.

For WordPress, you see types like:

  • Post
  • Page
  • Category
  • Author

Click on a type to expand it and see the available Fields:

  • For Post: title, excerpt, content, featured image, author, date, etc.

Fields show their data type (String, Image, List, Object, etc.). This helps you understand what data is available and what kind of values to expect.

Understanding field types

When you expand a type and see its fields, each field shows a kind:

Scalar — a single value (string, number, date, boolean). You can query it directly.

Object — a complex value with its own fields. Example: the "author" field of a post is an object with fields like name, email, bio.

List — multiple items of a type. Example: "posts" is a list of post objects.

When binding data in components, you chain through these types — post → author → name means navigate from the post object to the author object to get the name string.

Editing or removing a data source

Once added, your data source appears in the settings. To edit it:

  1. Click the data source
  2. Change the URL, headers, or label
  3. Click Apply

To remove it, click Delete next to the data source, then confirm.

Removing a data source doesn't delete expressions that reference it — but those expressions will show an error until you reconnect the source or update them.

Troubleshooting

"Could not connect to the API" — Check that the URL is correct and the API is running. Try opening the URL directly in your browser.

"Endpoint returned an error" — Your API is responding, but something is wrong with the request. Check authentication headers and any required parameters.

"Types are loading but incomplete" — GraphQL introspection might be returning a partial schema. Try refreshing the dialog.

Headers aren't being sent — Some APIs have CORS restrictions. If Silex can't authenticate even with the right headers, ask your API provider to enable CORS for your domain.

Learn more

Quiz

Q1: Your WordPress site's GraphQL endpoint is at https://myblog.com/graphql. Where do you enter this in Silex?

  • A) In the URL field of the data source dialog
  • B) In the site settings
  • C) It's automatically detected
Answer

A) In the URL field of the data source dialog — You paste the full GraphQL endpoint URL into the data source settings so Silex knows where to fetch data from.

Q2: You're setting up a data source for a private WordPress API that requires authentication. What do you add to the dialog?

  • A) The username and password in the URL
  • B) An Authorization header with the API token
  • C) The JWT token in the label field
Answer

B) An Authorization header with the API token — Authentication headers are separate from the URL. Add a header (usually named "Authorization") with the token value your API provider gives you.

Q3: You selected "WordPress" as the backend type. What does this do?

  • A) It installs WordPress on your server
  • B) It connects specifically to WordPress and won't work with other platforms
  • C) It optimizes the editor UI for WordPress data structure
Answer

C) It optimizes the editor UI for WordPress data structure — Choosing a backend type helps Silex understand the data layout and provide smart defaults, but you can use any GraphQL API with the "Generic" option if your platform isn't listed.

Q4: When you click Next, Silex shows a "CORS error". What does this mean?

  • A) Your URL is wrong
  • B) Your API provider hasn't configured CORS to allow requests from Silex
  • C) You're missing authentication headers
Answer

B) Your API provider hasn't configured CORS to allow requests from Silex — CORS (Cross-Origin Resource Sharing) is a browser security feature. Your API provider needs to explicitly allow requests from Silex's domain.

Edit this page on GitLab