Share your feedback
Reach out to us with feedback and suggestions to improve the Wix Headless experience, and join the Headless channel of the Devs on Wix Discord community to discuss features and connect with our growing community of developers.
The SDK data
module allows you to take advantage of Wix content management capabilities in a site or app you build on any platform. This means you can access and manage content in a Wix project from your site's code, as well as from the Content Management System (CMS) in the Wix dashboard.
This tutorial shows you how to create a React component that:
The tutorial is based on the Wix Headless example site. You can test out the live example site, or fork the site's code repo to use as a starting point for your own site or app. The component described in this tutorial is the list of examples at the bottom the page.
This implementation focuses on simplicity and understandability, rather than feature richness, performance or completeness. For details about additional functionality, see Wix Data in the API Reference. Looking for a more comprehensive example site integrating Wix Headless APIs for data management? Check out our starter templates.
Note: The code in this tutorial is written in JSX, but you can use the SDK in any JavaScript environment.
Implementing the Wix Data flow includes the following steps:
useEffect
hook.Before using the SDK, there are a few things you need to set up on your Wix account and in your external site or app's coding environment.
To set up the Wix Headless environment, follow these steps:
If you haven't already, create a project.
When prompted to add functionalities to your new project, you don't need to add any business solutions. Every Wix Headless project comes with CMS support installed.
Set up authorization for your site by creating and configuring an OAuth app.
Install the SDK and relevant SDK module packages by running the following commands:
For NPM:
1
For Yarn:
1
Install the react
package to handle UI rendering and the js-cookie
package to handle session cookies.
For NPM:
1
For Yarn:
1
Follow these steps to create a collection and add content to it:
Open the CMS in the project dashboard.
Click Create Collection.
Enter a name and ID for your collection, select Multiple items (Default), then click Create.
For this example, create a collection with the ID examples
.
You're now taken to the examples
collection page. Click Manage Fields.
Add fields to your collection.
For this example, ensure you include text fields with the IDs タイトル
, 記述
そして slug
, and a numerical field with the ID orderId
:
In the collection page, enter the initial content for your collection.
Learn more about managing data using the CMS.
The next step is to set up your code file to run the SDK functions. To set up the code file, follow these steps:
Add the following import statements to the top of your code file:
1
Create an SDK client by adding the following code to your code file. Replace the value for clientId
with your OAuth app's client ID. You can find the ID in your project's Headless Settings menu.
The value for tokens
は 'session'
cookie on the visitor's browser. It's used to make calls to the Wix API. This way, you can maintain previous visitor sessions. For information about managing cookies, see Session Token Management.
1
The logic for our example content retrieval and rendering flow is contained in a React component called 例
. To create the component, follow these steps:
Define the component function as a default export in your code file:
1
Define a state variable by adding the following code in the component function:
1
In the steps that follow, the examples
state variable stores the data retrieved by querying the Wix project's examples
collection.
Define a function to fetch the data you need and save it to the state variable, by adding the following code to the component function:
1
This function uses queryDataItems()
with chained DataItemsQueryBuilder
functions to retrieve all items in the examples
collection, sorted by orderId
in ascending order. The function then stores the resulting items in the examples
state variable.
useEffect
hookAdd the following code to the 例
component to run the fetchExamples()
function after the component is rendered. This ensures that the data is retrieved when the component mounts.
1
You can now render the data you retrieved in the component's dynamic UI. Add the following code to the 例
component function's return
statement to render the UI. This code renders a card for each item stored in the examples
state variable. Each card displays the タイトル
そして 記述
for an item and links to its slug
.
1
You can use the following full code example as a starting point for developing your own site:
1