Community Plugin

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 to fetch and structure data efficiently.

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

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.