> Portal Navigation:
>
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt
## Resource: Data Quick Start
## Article: Data Quick Start
## Article Link: https://dev.wix.com/docs/go-headless/get-started/tutorials/self-managed-headless/java-script-sdk-tutorials/data-quick-start.md
## Article Content:
# Data Quick Start
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)](https://www.wix.com/my-account/site-selector/?buttonText=Select%20Site&title=Select%20a%20Site&autoSelectOnSingleSite=true&actionUrl=https:%2F%2Fwww.wix.com%2Fdashboard%2F%7B%7BmetaSiteId%7D%7D%2Fdatabase) in the Wix dashboard.
> **Note:** If you're using the [Wix CLI](https://dev.wix.com/docs/go-headless/develop-your-project/wix-managed-headless/about-the-wix-cli-for-headless.md), you don't need to handle OAuth setup or create a client because it's done automatically.
This tutorial shows you how to create a React component that:
- Retrieves content from a data collection in a Wix project's database.
- Uses the content retrieved in a dynamic UI.
This implementation focuses on simplicity and understandability, rather than feature richness, performance or completeness. For details about additional functionality, see [Wix Data](https://dev.wix.com/docs/sdk/backend-modules/data/introduction.md) in the API Reference. Looking for a more comprehensive example site integrating Wix Headless APIs for data management? Check out our [starter templates](https://dev.wix.com/docs/go-headless/get-started/templates/self-managed-templates/next-js-templates.md).
> **Note:** The code in this tutorial is written in [JSX](https://react.dev/learn/writing-markup-with-jsx), but you can use the SDK in any JavaScript environment.
Implementing the Wix Data flow includes the following steps:
1. Set up the Wix Headless environment.
1. Add content in the CMS.
1. Import the SDK modules and create an SDK client.
1. Create a React component and a state variable.
1. Define a function to fetch data.
1. Add the `useEffect` hook.
1. Render the UI.
## Step 1: Set up the Wix Headless environment
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:
1. If you haven't already, [create a project](https://dev.wix.com/docs/go-headless/develop-your-project/self-managed-headless/create-a-project.md).
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.
2. Set up authorization for your site by [creating and configuring](https://dev.wix.com/docs/go-headless/develop-your-project/self-managed-headless/authentication/about-authentication.md) an OAuth app.
3. Install the SDK and relevant SDK module packages by running the following commands:
For NPM:
```
npm install @wix/sdk
npm install @wix/data
```
For Yarn:
```
yarn add @wix/sdk
yarn add @wix/data
```
4. Install the `react` package to handle UI rendering and the `js-cookie` package to handle session cookies.
For NPM:
```
npm install react
npm install js-cookie
```
For Yarn:
```
yarn add react
yarn add js-cookie
```
## Step 2: Add content in the CMS
Follow these steps to create a collection and add content to it:
1. Open the [CMS](https://www.wix.com/my-account/site-selector/?buttonText=Select%20Site&title=Select%20a%20Site&autoSelectOnSingleSite=true&actionUrl=https:%2F%2Fwww.wix.com%2Fdashboard%2F%7B%7BmetaSiteId%7D%7D%2Fdatabase) in the project dashboard.
1. Click **Create Collection**.
1. 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`.
1. You're now taken to the `examples` collection page. Click **Manage Fields**.
1. Add fields to your collection.
For this example, ensure you include text fields with the IDs `title`, `description`, and `slug`, and a numerical field with the ID `orderId`:
1. In the collection page, enter the initial content for your collection.
Learn more about managing data using the [CMS](https://support.wix.com/en/article/about-the-content-manager-7160473).
## Step 3: Import the SDK modules and create an SDK client
The next step is to set up your code file to run the SDK functions. To set up the code file, follow these steps:
1. Add the following import statements to the top of your code file:
```jsx
import Link from 'next/link';
import Cookies from 'js-cookie';
import { useEffect, useState } from 'react';
import { createClient, OAuthStrategy } from '@wix/sdk';
import { items } from '@wix/data';
```
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**](https://www.wix.com/my-account/site-selector/?buttonText=Select%20Site&title=Select%20a%20Site&autoSelectOnSingleSite=true&actionUrl=https:%2F%2Fwww.wix.com%2Fdashboard%2F%7B%7BmetaSiteId%7D%7D%2Foauth-apps-settings).
The value for `tokens` is the `'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](https://dev.wix.com/docs/go-headless/get-started/tutorials/self-managed-headless/java-script-sdk-tutorials/quick-start.md).
```jsx
const myWixClient = createClient({
modules: { items },
auth: OAuthStrategy({
clientId: ``,
tokens: JSON.parse(Cookies.get('session') || null),
}),
});
```
## Step 4: Create a React component and a state variable
The logic for our example content retrieval and rendering flow is contained in a React component called `Examples`. To create the component, follow these steps:
1. Define the component function as a default export in your code file:
```jsx
export default function Examples() {}
```
1. Define a state variable by adding the following code in the component function:
```jsx
const [examples, setExamples] = useState([]);
```
In the steps that follow, the `examples` state variable stores the data retrieved by querying the Wix project's `examples` collection.
## Step 5: Define a function to fetch data
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:
```jsx
async function fetchExamples() {
const examples = await myWixClient.items
.query('examples')
.ascending('orderId')
.find();
setExamples(examples.items);
}
```
This function uses [`query()`](https://dev.wix.com/docs/sdk/backend-modules/data/items/query.md) with chained [`WixDataQuery` functions](https://dev.wix.com/docs/sdk/backend-modules/data/items/wix-data-query/introduction.md) 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.
## Step 6: Add the `useEffect` hook
Add the following code to the `Examples` component to run the `fetchExamples()` function after the component is rendered. This ensures that the data is retrieved when the component mounts.
```jsx
useEffect(() => {
fetchExamples();
}, []);
```
## Step 7: Render the UI
You can now render the data you retrieved in the component's dynamic UI. Add the following code to the `Examples` 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 `title` and `description` for an item and links to its `slug`.
```jsx
return (
);
```
## Complete code example
You can use the following full code example as a starting point for developing your own site:
```jsx
import Cookies from 'js-cookie';
import { useEffect, useState } from 'react';
import { createClient, OAuthStrategy } from '@wix/sdk';
import { items } from '@wix/data';
const myWixClient = createClient({
modules: { items },
auth: OAuthStrategy({
clientId: ``,
tokens: JSON.parse(Cookies.get('session') || null),
}),
});
export default function Examples() {
const [examples, setExamples] = useState([]);
async function fetchExamples() {
const examples = await myWixClient.items
.query('examples')
.ascending('orderId')
.find();
setExamples(examples.items);
}
useEffect(() => {
fetchExamples();
}, []);
return (