gatsby-source-wix

A Gatsby plugin to pull data from Wix Studio's CMS into Gatsby's GraphQL data layer. This plugin uses the @wix/sdk and @wix/data libraries under the hood.

Features

• Integrates Wix Studio CMS with Gatsby, making CMS data available in Gatsby’s GraphQL API.
• Supports advanced queries and populates references within collections.

Installation

Install the plugin using npm or yarn:

npm install gatsby-source-wix

or

yarn add gatsby-source-wix

Plugin Options

The plugin requires several options to authenticate and query data from your Wix CMS. Here’s a breakdown of each required field:

Option	Type	Required	Description
apiKey	string	Yes	Your Wix API key.
accountId	string	Yes	The unique ID of your Wix account.
siteId	string	Yes	The unique ID of your Wix site.
queries	array	Yes	Array of query objects for each collection to fetch. Each object should include: - collectionName (string): Name of the collection - references (array, optional): Names of fields to populate references from

Example queries Array

The queries option takes an array of objects that specify the collections to query and optional references:

queries: [
  {
    collectionName: 'blogPosts',
    references: ['author', 'tags'],
  },
  {
    collectionName: 'projects',
  },
];

How to Obtain API Credentials

To connect your Wix CMS with Gatsby, you’ll need the following credentials:

• API Key
• Account ID
• Site ID

Refer to Wix CMS documentation for step-by-step instructions on obtaining these details.

Usage

In your gatsby-config.js, add gatsby-source-wix to your plugins array with the necessary options:

// gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: 'gatsby-source-wix',
      options: {
        apiKey: 'your-api-key',
        accountId: 'your-account-id',
        siteId: 'your-site-id',
        queries: [
          {
            collectionName: 'blogPosts',
            references: ['author', 'tags'],
          },
          {
            collectionName: 'projects',
          },
        ],
      },
    },
  ],
};

Querying Data

Once the plugin is set up, your Wix CMS data will be available in Gatsby’s GraphQL layer. You can query the data in Gatsby's GraphQL editor by referencing the collection names specified in your configuration.

Here's an example of querying a collection named blogPosts:

{
  allWixBlogPosts {
    nodes {
      id
      title
      content
      author {
        name
      }
      tags
    }
  }
}

Contributing

Contributions, issues, and feature requests are welcome! Feel free to check out the issues page.

---

License

This project is licensed under the MIT License.