npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

gatsby-source-wix

v1.0.1

Published

Gatsby source plugin to fetch data from Wix CMS

Downloads

159

Readme

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.

NPM Version

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.