"use strict"; const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0]; const {useMDXComponents: _provideComponents} = arguments[0]; function _createMdxContent(props) { const _components = { a: "a", code: "code", figcaption: "figcaption", figure: "figure", h1: "h1", h2: "h2", h3: "h3", li: "li", p: "p", pre: "pre", span: "span", strong: "strong", table: "table", tbody: "tbody", td: "td", th: "th", thead: "thead", tr: "tr", ul: "ul", ..._provideComponents(), ...props.components }, {Callout, Video} = _components; if (!Callout) _missingMdxReference("Callout", true); if (!Video) _missingMdxReference("Video", true); return _jsxs(_Fragment, { children: [_jsx(_components.h1, { id: "payload-cms", children: "Payload CMS" }), "\n", _jsx(_components.h2, { id: "why-i-chose-payload", children: "Why I chose Payload" }), "\n", _jsx(_components.p, { children: "First I would like to explain why I chose to use Payload to add to the stack.\nPayload was my first choice, because it is open-source, self-hosted, has a great\ndeveloper experience, and has a great community." }), "\n", _jsx(_components.p, { children: "I first came across Payload when I was looking for a headless Next.js CMS for my\npersonal portfolio. I originally did not end up using it, because I was\noverwhelmed by the amount of options available. I wanted to quickly get\nsomething up and running, and I ended up hardcoding the content into my site,\nwhich was a mistake." }), "\n", _jsxs(_components.p, { children: ["When I started working on the second version of my portfolio\n", _jsx(_components.a, { href: "https://lasse.famlam.ca", children: "(my current one)" }), ", I decided to give Payload a try. I\nwas blown away by how easy it was to set up and use. The documentation is great,\nand the community is very helpful. I was able to get up and running in no time,\nand I was could focus on building the site and writing content instead of\nworrying about the CMS."] }), "\n", _jsx(_components.h2, { id: "what-is-payload", children: "What is Payload?" }), "\n", _jsx(_components.p, { children: "Payload is a headless open-source CMS natively built for Next.js. It has full\nsupport for TypeScript, and is fully typesafe. Its main focus is on providing a\nflexible and developer-friendly experience with features such as:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Payload is Next.js native" }), ": Payload is built on Next.js, ensuring less\nhassle, more speed, and enhancing your projects from the ground up."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Customizable Content Modeling" }), ": Define your schema in code and get a full\nTypeScript backend and admin panel. Instantly."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Fully Leverage React Server Components" }), ": Extend your admin panel with\nserver components, reducing client-side load and keeping business logic behind\nthe scenes."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Turbopack Out of Box" }), ": Payload supports Turbopack from the start,\naccelerating development with instant updates and a superior developer\nexperience."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Deploy Serverlessly" }), ": A Next.js foundation allows effortless deploy of your\nfull stack to serverless platforms like Vercel, streamlining your workflow and\nboosting scalability."] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Harmonious Front and Back-End Deployment" }), ": Bring your front and back-end\ntogether in perfect harmony, simplifying deployment and enhancing\ncollaboration across your entire stack."] }), "\n"] }), "\n", _jsx(_components.h2, { id: "how-to-use-payload", children: "How to use Payload" }), "\n", _jsx(Callout, { type: "info", children: _jsxs(_components.p, { children: ["This guide is not meant to be a full tutorial on how to use Payload. It is\njust a quick overview to get you started. For more complete information,\nplease check out the ", _jsx(_components.a, { href: "https://payloadcms.com/docs/getting-started/what-is-payload", children: "official\ndocumentation" }), "."] }) }), "\n", _jsx(_components.h3, { id: "payload-config", children: "Payload config" }), "\n", _jsxs(_components.p, { children: ["The ", _jsx(_components.code, { children: "payload.config.ts" }), " file is where all the magic happens. It is a fully-typed\nJavaScript object that can be infinitely extended upon. It is also where you\nconfigure your Payload instance. Everything from your Database choice to the\nappearance of the Admin Panel is configured there."] }), "\n", _jsxs(_components.p, { children: ["The config is typically located in the root of your project along with the\n", _jsx(_components.code, { children: "next.config.mjs" }), " file. Below you can see an example of the simplest possible\nPayload config:"] }), "\n", _jsxs(_components.figure, { "data-rehype-pretty-code-figure": "", children: [_jsx(_components.figcaption, { "data-rehype-pretty-code-title": "", "data-language": "ts", "data-theme": "github-dark-default github-light-default", children: "payload.config.ts" }), _jsx(_components.pre, { tabIndex: "0", "data-language": "ts", "data-theme": "github-dark-default github-light-default", children: _jsxs(_components.code, { "data-line-numbers": "", "data-language": "ts", "data-theme": "github-dark-default github-light-default", style: { display: "grid" }, "data-line-numbers-max-digits": "2", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: "import" }), _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " { postgresAdapter } " }), _jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: "from" }), _jsx(_components.span, { style: { "--shiki-dark": "#A5D6FF", "--shiki-light": "#0A3069" }, children: " \"@payloadcms/db-postgres\"" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: "import" }), _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " { buildConfig } " }), _jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: "from" }), _jsx(_components.span, { style: { "--shiki-dark": "#A5D6FF", "--shiki-light": "#0A3069" }, children: " \"payload\"" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: "export" }), _jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: " default" }), _jsx(_components.span, { style: { "--shiki-dark": "#D2A8FF", "--shiki-light": "#8250DF" }, children: " buildConfig" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFA657", "--shiki-light": "#953800" }, children: "({" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " secret: process.env." }), _jsx(_components.span, { style: { "--shiki-dark": "#79C0FF", "--shiki-light": "#0550AE" }, children: "PAYLOAD_SECRET" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFA657", "--shiki-light": "#953800" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " db: " }), _jsx(_components.span, { style: { "--shiki-dark": "#D2A8FF", "--shiki-light": "#8250DF" }, children: "postgresAdapter" }), _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: "({" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " pool: {" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " connectionString: process.env." }), _jsx(_components.span, { style: { "--shiki-dark": "#79C0FF", "--shiki-light": "#0550AE" }, children: "DATABASE_URL" }), _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " }," }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " })" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFA657", "--shiki-light": "#953800" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " collections: [" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " {" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " slug: " }), _jsx(_components.span, { style: { "--shiki-dark": "#A5D6FF", "--shiki-light": "#0A3069" }, children: "\"posts\"" }), _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " fields: [" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " {" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " name: " }), _jsx(_components.span, { style: { "--shiki-dark": "#A5D6FF", "--shiki-light": "#0A3069" }, children: "\"title\"" }), _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " type: " }), _jsx(_components.span, { style: { "--shiki-dark": "#A5D6FF", "--shiki-light": "#0A3069" }, children: "\"text\"" }), _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " ]," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " }," }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " ]" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFA657", "--shiki-light": "#953800" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#FFA657", "--shiki-light": "#953800" }, children: "})" }) })] }) })] }), "\n", _jsxs(_components.p, { children: ["See\n", _jsx(_components.a, { href: "https://payloadcms.com/docs/configuration/overview", children: "Payload config overview" }), "\nfor more information and examples of the config."] }), "\n", _jsx(_components.h3, { id: "database", children: "Database" }), "\n", _jsx(_components.p, { children: "Payload support a variety of databases, including MongoDB, PostgreSQL, and\nSQLite." }), "\n", _jsxs(_components.p, { children: ["To configure a Database adapter, use the ", _jsx(_components.code, { children: "db" }), " property in the config."] }), "\n", _jsxs(_components.figure, { "data-rehype-pretty-code-figure": "", children: [_jsx(_components.figcaption, { "data-rehype-pretty-code-title": "", "data-language": "ts", "data-theme": "github-dark-default github-light-default", children: "payload.config.ts" }), _jsx(_components.pre, { tabIndex: "0", "data-language": "ts", "data-theme": "github-dark-default github-light-default", children: _jsxs(_components.code, { "data-line-numbers": "", "data-language": "ts", "data-theme": "github-dark-default github-light-default", style: { display: "grid" }, "data-line-numbers-max-digits": "2", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: "import" }), _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " { postgresAdapter } " }), _jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: "from" }), _jsx(_components.span, { style: { "--shiki-dark": "#A5D6FF", "--shiki-light": "#0A3069" }, children: " \"@payloadcms/db-postgres\"" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: "import" }), _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " { buildConfig } " }), _jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: "from" }), _jsx(_components.span, { style: { "--shiki-dark": "#A5D6FF", "--shiki-light": "#0A3069" }, children: " \"payload\"" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: "export" }), _jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: " default" }), _jsx(_components.span, { style: { "--shiki-dark": "#D2A8FF", "--shiki-light": "#8250DF" }, children: " buildConfig" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFA657", "--shiki-light": "#953800" }, children: "({" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#8B949E", "--shiki-light": "#6E7781" }, children: " // ..." }) }), "\n", _jsxs(_components.span, { className: "highlighted", "data-line": "", "data-highlighted-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " db: " }), _jsx(_components.span, { style: { "--shiki-dark": "#D2A8FF", "--shiki-light": "#8250DF" }, children: "postgresAdapter" }), _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: "({" })] }), "\n", _jsx(_components.span, { className: "highlighted", "data-line": "", "data-highlighted-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " pool: {" }) }), "\n", _jsxs(_components.span, { className: "highlighted", "data-line": "", "data-highlighted-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " connectionString: process.env." }), _jsx(_components.span, { style: { "--shiki-dark": "#79C0FF", "--shiki-light": "#0550AE" }, children: "DATABASE_URL" }), _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: "," })] }), "\n", _jsx(_components.span, { className: "highlighted", "data-line": "", "data-highlighted-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " }," }) }), "\n", _jsxs(_components.span, { className: "highlighted", "data-line": "", "data-highlighted-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " })" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFA657", "--shiki-light": "#953800" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#FFA657", "--shiki-light": "#953800" }, children: "})" }) })] }) })] }), "\n", _jsxs(_components.p, { children: ["See ", _jsx(_components.a, { href: "https://payloadcms.com/docs/database/overview", children: "Payload database overview" }), "\nfor more information and examples of the database adapters."] }), "\n", _jsx(_components.h3, { id: "collections", children: "Collections" }), "\n", _jsxs(_components.p, { children: ["A collection is a group of records, called Documents, that share the same\nstructure. For example, a blog post collection would have a title, body, and\nauthor field. To define a collection, use the ", _jsx(_components.code, { children: "collections" }), " property in the\nconfig."] }), "\n", _jsxs(_components.figure, { "data-rehype-pretty-code-figure": "", children: [_jsx(_components.figcaption, { "data-rehype-pretty-code-title": "", "data-language": "ts", "data-theme": "github-dark-default github-light-default", children: "payload.config.ts" }), _jsx(_components.pre, { tabIndex: "0", "data-language": "ts", "data-theme": "github-dark-default github-light-default", children: _jsxs(_components.code, { "data-line-numbers": "", "data-language": "ts", "data-theme": "github-dark-default github-light-default", style: { display: "grid" }, "data-line-numbers-max-digits": "1", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: "import" }), _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " { buildConfig } " }), _jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: "from" }), _jsx(_components.span, { style: { "--shiki-dark": "#A5D6FF", "--shiki-light": "#0A3069" }, children: " \"payload\"" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: "export" }), _jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: " default" }), _jsx(_components.span, { style: { "--shiki-dark": "#D2A8FF", "--shiki-light": "#8250DF" }, children: " buildConfig" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFA657", "--shiki-light": "#953800" }, children: "({" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#8B949E", "--shiki-light": "#6E7781" }, children: " // ..." }) }), "\n", _jsx(_components.span, { className: "highlighted", "data-line": "", "data-highlighted-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " collections: [" }) }), "\n", _jsx(_components.span, { className: "highlighted", "data-line": "", "data-highlighted-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#8B949E", "--shiki-light": "#6E7781" }, children: " // Your Collections go here" }) }), "\n", _jsxs(_components.span, { className: "highlighted", "data-line": "", "data-highlighted-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " ]" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFA657", "--shiki-light": "#953800" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#FFA657", "--shiki-light": "#953800" }, children: "})" }) })] }) })] }), "\n", _jsx(_components.p, { children: "Generally, you will want to create a Collection in a separate file, and import\nit into the config. This keeps your config file clean and easy to read." }), "\n", _jsxs(_components.figure, { "data-rehype-pretty-code-figure": "", children: [_jsx(_components.figcaption, { "data-rehype-pretty-code-title": "", "data-language": "ts", "data-theme": "github-dark-default github-light-default", children: "collections/posts.ts" }), _jsx(_components.pre, { tabIndex: "0", "data-language": "ts", "data-theme": "github-dark-default github-light-default", children: _jsxs(_components.code, { "data-line-numbers": "", "data-language": "ts", "data-theme": "github-dark-default github-light-default", style: { display: "grid" }, "data-line-numbers-max-digits": "2", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: "import" }), _jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: " type" }), _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " { CollectionConfig } " }), _jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: "from" }), _jsx(_components.span, { style: { "--shiki-dark": "#A5D6FF", "--shiki-light": "#0A3069" }, children: " \"payload\"" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: "export" }), _jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: " const" }), _jsx(_components.span, { style: { "--shiki-dark": "#79C0FF", "--shiki-light": "#0550AE" }, children: " Posts" }), _jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFA657", "--shiki-light": "#953800" }, children: " CollectionConfig" }), _jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: " =" }), _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " slug: " }), _jsx(_components.span, { style: { "--shiki-dark": "#A5D6FF", "--shiki-light": "#0A3069" }, children: "\"posts\"" }), _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " fields: [" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " {" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " name: " }), _jsx(_components.span, { style: { "--shiki-dark": "#A5D6FF", "--shiki-light": "#0A3069" }, children: "\"title\"" }), _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " type: " }), _jsx(_components.span, { style: { "--shiki-dark": "#A5D6FF", "--shiki-light": "#0A3069" }, children: "\"text\"" }), _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " {" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " name: " }), _jsx(_components.span, { style: { "--shiki-dark": "#A5D6FF", "--shiki-light": "#0A3069" }, children: "\"body\"" }), _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " type: " }), _jsx(_components.span, { style: { "--shiki-dark": "#A5D6FF", "--shiki-light": "#0A3069" }, children: "\"richText\"" }), _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " {" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " name: " }), _jsx(_components.span, { style: { "--shiki-dark": "#A5D6FF", "--shiki-light": "#0A3069" }, children: "\"author\"" }), _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " type: " }), _jsx(_components.span, { style: { "--shiki-dark": "#A5D6FF", "--shiki-light": "#0A3069" }, children: "\"relationship\"" }), _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: "," })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " relationTo: " }), _jsx(_components.span, { style: { "--shiki-dark": "#A5D6FF", "--shiki-light": "#0A3069" }, children: "\"users\"" }), _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " }," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " ]," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: "}" }) })] }) })] }), "\n", _jsxs(_components.figure, { "data-rehype-pretty-code-figure": "", children: [_jsx(_components.figcaption, { "data-rehype-pretty-code-title": "", "data-language": "ts", "data-theme": "github-dark-default github-light-default", children: "payload.config.ts" }), _jsx(_components.pre, { tabIndex: "0", "data-language": "ts", "data-theme": "github-dark-default github-light-default", children: _jsxs(_components.code, { "data-line-numbers": "", "data-language": "ts", "data-theme": "github-dark-default github-light-default", style: { display: "grid" }, "data-line-numbers-max-digits": "2", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: "import" }), _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " { buildConfig } " }), _jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: "from" }), _jsx(_components.span, { style: { "--shiki-dark": "#A5D6FF", "--shiki-light": "#0A3069" }, children: " \"payload\"" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: "import" }), _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " { posts } " }), _jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: "from" }), _jsx(_components.span, { style: { "--shiki-dark": "#A5D6FF", "--shiki-light": "#0A3069" }, children: " \"./collections/posts\"" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: "export" }), _jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: " default" }), _jsx(_components.span, { style: { "--shiki-dark": "#D2A8FF", "--shiki-light": "#8250DF" }, children: " buildConfig" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFA657", "--shiki-light": "#953800" }, children: "({" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#8B949E", "--shiki-light": "#6E7781" }, children: " // ..." }) }), "\n", _jsx(_components.span, { className: "highlighted", "data-line": "", "data-highlighted-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " collections: [" }) }), "\n", _jsx(_components.span, { className: "highlighted", "data-line": "", "data-highlighted-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " posts," }) }), "\n", _jsx(_components.span, { className: "highlighted", "data-line": "", "data-highlighted-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#8B949E", "--shiki-light": "#6E7781" }, children: " // Other Collections go here" }) }), "\n", _jsxs(_components.span, { className: "highlighted", "data-line": "", "data-highlighted-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " ]" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFA657", "--shiki-light": "#953800" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#FFA657", "--shiki-light": "#953800" }, children: "})" }) })] }) })] }), "\n", _jsxs(_components.p, { children: ["See\n", _jsx(_components.a, { href: "https://payloadcms.com/docs/configuration/collections", children: "Payload collections overview" }), "\nfor more information and examples of collections."] }), "\n", _jsx(Callout, { type: "info", children: _jsxs(_components.p, { children: ["If your Collection is only meant to contain a single Document (e.g. a Footer),\nyou can use a ", _jsx(_components.a, { href: "#globals", children: _jsx(_components.code, { children: "Global" }) }), " instead."] }) }), "\n", _jsx(_components.h3, { id: "globals", children: "Globals" }), "\n", _jsxs(_components.p, { children: ["Globals are very similar to ", _jsx(_components.a, { href: "#collections", children: "Collections" }), ", but they are meant to\nbe used for a single Document."] }), "\n", _jsxs(_components.p, { children: ["For example, a Footer or a Header would be a good condidate for a Global. To\ndefine a Global, use the ", _jsx(_components.code, { children: "globals" }), " property in the config."] }), "\n", _jsxs(_components.figure, { "data-rehype-pretty-code-figure": "", children: [_jsx(_components.figcaption, { "data-rehype-pretty-code-title": "", "data-language": "ts", "data-theme": "github-dark-default github-light-default", children: "payload.config.ts" }), _jsx(_components.pre, { tabIndex: "0", "data-language": "ts", "data-theme": "github-dark-default github-light-default", children: _jsxs(_components.code, { "data-line-numbers": "", "data-language": "ts", "data-theme": "github-dark-default github-light-default", style: { display: "grid" }, "data-line-numbers-max-digits": "1", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: "import" }), _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " { buildConfig } " }), _jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: "from" }), _jsx(_components.span, { style: { "--shiki-dark": "#A5D6FF", "--shiki-light": "#0A3069" }, children: " \"payload\"" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: "export" }), _jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: " default" }), _jsx(_components.span, { style: { "--shiki-dark": "#D2A8FF", "--shiki-light": "#8250DF" }, children: " buildConfig" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFA657", "--shiki-light": "#953800" }, children: "({" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#8B949E", "--shiki-light": "#6E7781" }, children: " // ..." }) }), "\n", _jsx(_components.span, { className: "highlighted", "data-line": "", "data-highlighted-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " globals: [" }) }), "\n", _jsx(_components.span, { className: "highlighted", "data-line": "", "data-highlighted-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#8B949E", "--shiki-light": "#6E7781" }, children: " // Your Globals go here" }) }), "\n", _jsxs(_components.span, { className: "highlighted", "data-line": "", "data-highlighted-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " ]" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFA657", "--shiki-light": "#953800" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#FFA657", "--shiki-light": "#953800" }, children: "})" }) })] }) })] }), "\n", _jsx(_components.p, { children: "The same way you would create a Collection in a separate file, you can create a\nGlobal in a separate file, and import it into the config." }), "\n", _jsxs(_components.figure, { "data-rehype-pretty-code-figure": "", children: [_jsx(_components.figcaption, { "data-rehype-pretty-code-title": "", "data-language": "ts", "data-theme": "github-dark-default github-light-default", children: "payload.config.ts" }), _jsx(_components.pre, { tabIndex: "0", "data-language": "ts", "data-theme": "github-dark-default github-light-default", children: _jsxs(_components.code, { "data-line-numbers": "", "data-language": "ts", "data-theme": "github-dark-default github-light-default", style: { display: "grid" }, "data-line-numbers-max-digits": "2", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: "import" }), _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " { buildConfig } " }), _jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: "from" }), _jsx(_components.span, { style: { "--shiki-dark": "#A5D6FF", "--shiki-light": "#0A3069" }, children: " \"payload\"" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: "import" }), _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " { footer } " }), _jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: "from" }), _jsx(_components.span, { style: { "--shiki-dark": "#A5D6FF", "--shiki-light": "#0A3069" }, children: " \"./globals/footer\"" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: "export" }), _jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: " default" }), _jsx(_components.span, { style: { "--shiki-dark": "#D2A8FF", "--shiki-light": "#8250DF" }, children: " buildConfig" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFA657", "--shiki-light": "#953800" }, children: "({" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#8B949E", "--shiki-light": "#6E7781" }, children: " // ..." }) }), "\n", _jsx(_components.span, { className: "highlighted", "data-line": "", "data-highlighted-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " globals: [" }) }), "\n", _jsx(_components.span, { className: "highlighted", "data-line": "", "data-highlighted-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " footer," }) }), "\n", _jsx(_components.span, { className: "highlighted", "data-line": "", "data-highlighted-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#8B949E", "--shiki-light": "#6E7781" }, children: " // Other Globals go here" }) }), "\n", _jsxs(_components.span, { className: "highlighted", "data-line": "", "data-highlighted-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " ]" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFA657", "--shiki-light": "#953800" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#FFA657", "--shiki-light": "#953800" }, children: "})" }) })] }) })] }), "\n", _jsxs(_components.p, { children: ["See\n", _jsx(_components.a, { href: "https://payloadcms.com/docs/configuration/globals", children: "Payload globals overview" }), "\nfor more information and examples of globals."] }), "\n", _jsx(_components.h3, { id: "fields", children: "Fields" }), "\n", _jsx(_components.p, { children: "Fields are the building blocks of your Collections and Globals. They define the\nstructure of your Documents. Payload has many built-in fields, but you can also\ncreate your own custom fields." }), "\n", _jsxs(_components.p, { children: ["To define a field, use the ", _jsx(_components.code, { children: "fields" }), " property in the Collection or Global config."] }), "\n", _jsxs(_components.figure, { "data-rehype-pretty-code-figure": "", children: [_jsx(_components.figcaption, { "data-rehype-pretty-code-title": "", "data-language": "ts", "data-theme": "github-dark-default github-light-default", children: "collections/posts.ts" }), _jsx(_components.pre, { tabIndex: "0", "data-language": "ts", "data-theme": "github-dark-default github-light-default", children: _jsxs(_components.code, { "data-line-numbers": "", "data-language": "ts", "data-theme": "github-dark-default github-light-default", style: { display: "grid" }, "data-line-numbers-max-digits": "1", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: "import" }), _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " { Text } " }), _jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: "from" }), _jsx(_components.span, { style: { "--shiki-dark": "#A5D6FF", "--shiki-light": "#0A3069" }, children: " \"@payloadcms/fields\"" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: "import" }), _jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: " type" }), _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " { CollectionConfig } " }), _jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: "from" }), _jsx(_components.span, { style: { "--shiki-dark": "#A5D6FF", "--shiki-light": "#0A3069" }, children: " \"payload\"" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: "export" }), _jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: " const" }), _jsx(_components.span, { style: { "--shiki-dark": "#79C0FF", "--shiki-light": "#0550AE" }, children: " Posts" }), _jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: ":" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFA657", "--shiki-light": "#953800" }, children: " CollectionConfig" }), _jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: " =" }), _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " {" })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#8B949E", "--shiki-light": "#6E7781" }, children: " // ..." }) }), "\n", _jsx(_components.span, { className: "highlighted", "data-line": "", "data-highlighted-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " fields: [" }) }), "\n", _jsx(_components.span, { className: "highlighted", "data-line": "", "data-highlighted-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#8B949E", "--shiki-light": "#6E7781" }, children: " // ..." }) }), "\n", _jsx(_components.span, { className: "highlighted", "data-line": "", "data-highlighted-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " ]," }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: "}" }) })] }) })] }), "\n", _jsx(_components.h3, { id: "apis", children: "APIs" }), "\n", _jsx(_components.p, { children: "Payload gives you access to three different APIs:" }), "\n", _jsxs(_components.ul, { children: ["\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "Local API" }), ": Extremely fast, direct-to-database access"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "REST API" }), ": Standard HTTP endpoints for querying and mutating data"] }), "\n", _jsxs(_components.li, { children: [_jsx(_components.strong, { children: "GraphQL API" }), ": A full GraphQL API with a GraphQL Playground"] }), "\n"] }), "\n", _jsx(Callout, { type: "warning", children: _jsxs(_components.p, { children: ["This guide will not cover the APIs in detail. For more information, please\ncheck out how to ", _jsx(_components.a, { href: "https://payloadcms.com/docs/getting-started/concepts#retrieving-data", children: "retrieve\ndata" }), "\nusing Payload."] }) }), "\n", _jsx(_components.p, { children: "The Local API is strongly typed and the fastest way to access your data, but it\nis only available in the app itself. If you need to access your data from\noutside the app, you can use the REST or the GraphQL APIs." }), "\n", _jsx(_components.p, { children: "Here is a quick example of how to use each API:" }), "\n", _jsxs(_components.figure, { "data-rehype-pretty-code-figure": "", children: [_jsx(_components.figcaption, { "data-rehype-pretty-code-title": "", "data-language": "ts", "data-theme": "github-dark-default github-light-default", children: "Local API" }), _jsx(_components.pre, { tabIndex: "0", "data-language": "ts", "data-theme": "github-dark-default github-light-default", children: _jsxs(_components.code, { "data-line-numbers": "", "data-language": "ts", "data-theme": "github-dark-default github-light-default", style: { display: "grid" }, "data-line-numbers-max-digits": "2", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: "import" }), _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " config " }), _jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: "from" }), _jsx(_components.span, { style: { "--shiki-dark": "#A5D6FF", "--shiki-light": "#0A3069" }, children: " \"@payload-config\"" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: "import" }), _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " { getPayload } " }), _jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: "from" }), _jsx(_components.span, { style: { "--shiki-dark": "#A5D6FF", "--shiki-light": "#0A3069" }, children: " \"payload\"" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: "async" }), _jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: " function" }), _jsx(_components.span, { style: { "--shiki-dark": "#D2A8FF", "--shiki-light": "#8250DF" }, children: " MyServerComponent" }), _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: "() {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: " const" }), _jsx(_components.span, { style: { "--shiki-dark": "#79C0FF", "--shiki-light": "#0550AE" }, children: " payload" }), _jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: " =" }), _jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: " await" }), _jsx(_components.span, { style: { "--shiki-dark": "#D2A8FF", "--shiki-light": "#8250DF" }, children: " getPayload" }), _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: "({ config })" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: " const" }), _jsx(_components.span, { style: { "--shiki-dark": "#79C0FF", "--shiki-light": "#0550AE" }, children: " posts" }), _jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: " =" }), _jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: " await" }), _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " payload." }), _jsx(_components.span, { style: { "--shiki-dark": "#D2A8FF", "--shiki-light": "#8250DF" }, children: "find" }), _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: "({" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " collection: " }), _jsx(_components.span, { style: { "--shiki-dark": "#A5D6FF", "--shiki-light": "#0A3069" }, children: "\"posts\"" }), _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: "," })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " })" }) }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: " return" }), _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " <" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFA657", "--shiki-light": "#953800" }, children: "ul" }), _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " {" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFA657", "--shiki-light": "#953800" }, children: "posts" }), _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#FFA657", "--shiki-light": "#953800" }, children: "docs" }), _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#FFA657", "--shiki-light": "#953800" }, children: "map" }), _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: "((" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFA657", "--shiki-light": "#953800" }, children: "post" }), _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: ") " }), _jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: "=>" }), _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: " <" }), _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: "li key" }), _jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: "{post.id}" }), _jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " <" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFA657", "--shiki-light": "#953800" }, children: "h2" }), _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: ">{post.title}" }), _jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: "" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " <" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFA657", "--shiki-light": "#953800" }, children: "p" }), _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: ">{post.body}" }), _jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: "" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " ))}" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " )" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: "}" }) })] }) })] }), "\n", _jsxs(_components.figure, { "data-rehype-pretty-code-figure": "", children: [_jsx(_components.figcaption, { "data-rehype-pretty-code-title": "", "data-language": "ts", "data-theme": "github-dark-default github-light-default", children: "REST API" }), _jsx(_components.pre, { tabIndex: "0", "data-language": "ts", "data-theme": "github-dark-default github-light-default", children: _jsxs(_components.code, { "data-line-numbers": "", "data-language": "ts", "data-theme": "github-dark-default github-light-default", style: { display: "grid" }, "data-line-numbers-max-digits": "2", children: [_jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: "async" }), _jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: " function" }), _jsx(_components.span, { style: { "--shiki-dark": "#D2A8FF", "--shiki-light": "#8250DF" }, children: " MyServerComponent" }), _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: "() {" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: " const" }), _jsx(_components.span, { style: { "--shiki-dark": "#79C0FF", "--shiki-light": "#0550AE" }, children: " res" }), _jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: " =" }), _jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: " await" }), _jsx(_components.span, { style: { "--shiki-dark": "#D2A8FF", "--shiki-light": "#8250DF" }, children: " fetch" }), _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: "(" }), _jsx(_components.span, { style: { "--shiki-dark": "#A5D6FF", "--shiki-light": "#0A3069" }, children: "\"http://localhost:3000/api/posts\"" }), _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: ")" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: " const" }), _jsx(_components.span, { style: { "--shiki-dark": "#79C0FF", "--shiki-light": "#0550AE" }, children: " posts" }), _jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: " =" }), _jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: " await" }), _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " res." }), _jsx(_components.span, { style: { "--shiki-dark": "#D2A8FF", "--shiki-light": "#8250DF" }, children: "json" }), _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: "()" })] }), "\n", _jsx(_components.span, { "data-line": "", children: " " }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: " return" }), _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " <" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFA657", "--shiki-light": "#953800" }, children: "ul" }), _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " {" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFA657", "--shiki-light": "#953800" }, children: "posts" }), _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: "." }), _jsx(_components.span, { style: { "--shiki-dark": "#FFA657", "--shiki-light": "#953800" }, children: "map" }), _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: "((" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFA657", "--shiki-light": "#953800" }, children: "post" }), _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: ") " }), _jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: "=>" }), _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " (" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: " <" }), _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: "li key" }), _jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: "=" }), _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: "{post.id}" }), _jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: ">" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " <" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFA657", "--shiki-light": "#953800" }, children: "h2" }), _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: ">{post.title}" }), _jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: "" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " <" }), _jsx(_components.span, { style: { "--shiki-dark": "#FFA657", "--shiki-light": "#953800" }, children: "p" }), _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: ">{post.body}" }), _jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: "" })] }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " ))}" }) }), "\n", _jsxs(_components.span, { "data-line": "", children: [_jsx(_components.span, { style: { "--shiki-dark": "#FF7B72", "--shiki-light": "#CF222E" }, children: " " })] }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: " )" }) }), "\n", _jsx(_components.span, { "data-line": "", children: _jsx(_components.span, { style: { "--shiki-dark": "#E6EDF3", "--shiki-light": "#1F2328" }, children: "}" }) })] }) })] }), "\n", _jsx(Callout, { type: "warning", children: _jsxs(_components.p, { children: ["Since the GraphQL API is much more complex, this guide will not cover it. To\nlearn how to use it, please check out the ", _jsx(_components.a, { href: "https://payloadcms.com/docs/graphql/overview", children: "GraphQL API\ndocumentation" }), "."] }) }), "\n", _jsx(_components.h2, { id: "useful-resources", children: "Useful Resources" }), "\n", _jsx(Video, { id: "j78HfUMIkBQ" }), "\n", _jsxs(_components.table, { children: [_jsx(_components.thead, { children: _jsxs(_components.tr, { children: [_jsx(_components.th, { children: "Resource" }), _jsx(_components.th, { children: "Description" })] }) }), _jsxs(_components.tbody, { children: [_jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.a, { href: "https://payloadcms.com/docs", children: "Payload Docs" }) }), _jsx(_components.td, { children: "The official documentation for Payload." })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.a, { href: "https://payloadcms.com/docs/getting-started/concepts", children: "Payload Concepts" }) }), _jsx(_components.td, { children: "A great place to start learning about Payload." })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.a, { href: "https://payloadcms.com/docs/getting-started/concepts#retrieving-data", children: "API Reference" }) }), _jsx(_components.td, { children: "API references for Payload." })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.a, { href: "https://github.com/payloadcms/payload", children: "Payload GitHub" }) }), _jsx(_components.td, { children: "Give Payload a star on GitHub!" })] }), _jsxs(_components.tr, { children: [_jsx(_components.td, { children: _jsx(_components.a, { href: "https://discord.gg/FSn5QRdsbC", children: "Payload Discord" }) }), _jsx(_components.td, { children: "Join the Payload community on Discord." })] })] })] })] }); } function MDXContent(props = {}) { const {wrapper: MDXLayout} = { ..._provideComponents(), ...props.components }; return MDXLayout ? _jsx(MDXLayout, { ...props, children: _jsx(_createMdxContent, { ...props }) }) : _createMdxContent(props); } return { default: MDXContent }; function _missingMdxReference(id, component) { throw new Error("Expected " + (component ? "component" : "object") + " `" + id + "` to be defined: you likely forgot to import, pass, or provide it."); }