docs: add missing types, prefer pnpm, fix various typos, discourage using payload from import (#9847)
- Adds missing types, especially the `Where` type. Will be helpful for people to see that they can type their queries like that - Mention pnpm first and prefer pnpm > npm > yarn throughout docs - Add `payload` to function arguments in examples to discourage people from doing `import payload from 'payload'` - PNPM => pnpm, NPM => npm - Fix some typos
This commit is contained in:
Alessio Gravili
@@ -98,7 +98,7 @@ From there, you are ready to make updates to your project. When you are ready to
|
||||
|
||||
Projects generated from a template will come pre-configured with the official Cloud Plugin, but if you are using your own repository you will need to add this into your project. To do so, add the plugin to your Payload Config:
|
||||
|
||||
`yarn add @payloadcms/payload-cloud`
|
||||
`pnpm add @payloadcms/payload-cloud`
|
||||
|
||||
```js
|
||||
import { payloadCloudPlugin } from '@payloadcms/payload-cloud'
|
||||
|
||||
@@ -10,7 +10,7 @@ keywords: documentation, getting started, guide, Content Management System, cms,
|
||||
|
||||
Payload requires the following software:
|
||||
|
||||
- Any JavaScript package manager (Yarn, NPM, or pnpm - pnpm is preferred)
|
||||
- Any JavaScript package manager (pnpm, npm, or yarn - pnpm is preferred)
|
||||
- Node.js version 20.9.0+
|
||||
- Any [compatible database](/docs/database/overview) (MongoDB, Postgres or Sqlite)
|
||||
|
||||
@@ -49,7 +49,7 @@ pnpm i payload @payloadcms/next @payloadcms/richtext-lexical sharp graphql
|
||||
|
||||
<Banner type="warning">
|
||||
<strong>Note:</strong>
|
||||
Swap out `pnpm` for your package manager. If you are using NPM, you might need to install using legacy peer deps: `npm i --legacy-peer-deps`.
|
||||
Swap out `pnpm` for your package manager. If you are using npm, you might need to install using legacy peer deps: `npm i --legacy-peer-deps`.
|
||||
</Banner>
|
||||
|
||||
Next, install a [Database Adapter](/docs/database/overview). Payload requires a Database Adapter to establish a database connection. Payload works with all types of databases, but the most common are MongoDB and Postgres.
|
||||
@@ -181,6 +181,6 @@ Once you have a Payload Config, update your `tsconfig` to include a `path` that
|
||||
|
||||
#### 5. Fire it up!
|
||||
|
||||
After you've reached this point, it's time to boot up Payload. Start your project in your application's folder to get going. By default, the Next.js dev script is `pnpm dev` (or `npm run dev` if using NPM).
|
||||
After you've reached this point, it's time to boot up Payload. Start your project in your application's folder to get going. By default, the Next.js dev script is `pnpm dev` (or `npm run dev` if using npm).
|
||||
|
||||
After it starts, you can go to `http://localhost:3000/admin` to create your first Payload user!
|
||||
|
||||
@@ -62,7 +62,7 @@ type Collection1 {
|
||||
|
||||
The above example outputs all your definitions to a file relative from your payload config as `./graphql/schema.graphql`. By default, the file will be output to your current working directory as `schema.graphql`.
|
||||
|
||||
### Adding an NPM script
|
||||
### Adding an npm script
|
||||
|
||||
<Banner type="warning">
|
||||
<strong>Important</strong>
|
||||
@@ -72,7 +72,7 @@ The above example outputs all your definitions to a file relative from your payl
|
||||
|
||||
Payload will automatically try and locate your config, but might not always be able to find it. For example, if you are working in a `/src` directory or similar, you need to tell Payload where to find your config manually by using an environment variable.
|
||||
|
||||
If this applies to you, create an NPM script to make generating types easier:
|
||||
If this applies to you, create an npm script to make generating types easier:
|
||||
|
||||
```json
|
||||
// package.json
|
||||
|
||||
@@ -28,6 +28,8 @@ To pass data between hooks, you can assign values to context in an earlier hook
|
||||
For example:
|
||||
|
||||
```ts
|
||||
import type { CollectionConfig } from 'payload'
|
||||
|
||||
const Customer: CollectionConfig = {
|
||||
slug: 'customers',
|
||||
hooks: {
|
||||
@@ -43,7 +45,6 @@ const Customer: CollectionConfig = {
|
||||
},
|
||||
],
|
||||
afterChange: [
|
||||
|
||||
async ({ context, doc, req }) => {
|
||||
// use context.customerData without needing to fetch it again
|
||||
if (context.customerData.contacted === false) {
|
||||
@@ -65,6 +66,8 @@ Let's say you have an `afterChange` hook, and you want to do a calculation insid
|
||||
Bad example:
|
||||
|
||||
```ts
|
||||
import type { CollectionConfig } from 'payload'
|
||||
|
||||
const Customer: CollectionConfig = {
|
||||
slug: 'customers',
|
||||
hooks: {
|
||||
@@ -92,6 +95,8 @@ Instead of the above, we need to tell the `afterChange` hook to not run again if
|
||||
Fixed example:
|
||||
|
||||
```ts
|
||||
import type { CollectionConfig } from 'payload'
|
||||
|
||||
const MyCollection: CollectionConfig = {
|
||||
slug: 'slug',
|
||||
hooks: {
|
||||
@@ -125,7 +130,7 @@ const MyCollection: CollectionConfig = {
|
||||
|
||||
The default TypeScript interface for `context` is `{ [key: string]: unknown }`. If you prefer a more strict typing in your project or when authoring plugins for others, you can override this using the `declare` syntax.
|
||||
|
||||
This is known as "type augmentation", a TypeScript feature which allows us to add types to existing objects. Simply put this in any `.ts` or `.d.ts` file:
|
||||
This is known as "type augmentation", a TypeScript feature which allows us to add types to existing types. Simply put this in any `.ts` or `.d.ts` file:
|
||||
|
||||
```ts
|
||||
import { RequestContext as OriginalRequestContext } from 'payload'
|
||||
|
||||
@@ -37,7 +37,7 @@ Root Hooks are not associated with any specific Collection, Global, or Field. Th
|
||||
To add Root Hooks, use the `hooks` property in your [Payload Config](/docs/configuration/config):
|
||||
|
||||
```ts
|
||||
import { buildConfig } from 'payload'
|
||||
import { buildConfig } from 'payload'
|
||||
|
||||
export default buildConfig({
|
||||
// ...
|
||||
@@ -60,7 +60,7 @@ The following options are available:
|
||||
The `afterError` Hook is triggered when an error occurs in the Payload application. This can be useful for logging errors to a third-party service, sending an email to the development team, logging the error to Sentry or DataDog, etc. The output can be used to transform the result object / status code.
|
||||
|
||||
```ts
|
||||
import { buildConfig } from 'payload'
|
||||
import { buildConfig } from 'payload'
|
||||
|
||||
export default buildConfig({
|
||||
// ...
|
||||
|
||||
@@ -84,7 +84,7 @@ cd dev
|
||||
npx create-payload-app@latest
|
||||
```
|
||||
|
||||
If you're using the plugin template, the dev folder is built out for you and the `samplePlugin` has already been installed in `dev/payload.config()`.
|
||||
If you're using the plugin template, the dev folder is built out for you and the `samplePlugin` has already been installed in `dev/payload.config.ts`.
|
||||
|
||||
```
|
||||
plugins: [
|
||||
@@ -95,11 +95,11 @@ If you're using the plugin template, the dev folder is built out for you an
|
||||
]
|
||||
```
|
||||
|
||||
You can add to the `dev/payload.config` and build out the dev project as needed to test your plugin.
|
||||
You can add to the `dev/payload.config.ts` and build out the dev project as needed to test your plugin.
|
||||
|
||||
When you're ready to start development, navigate into this folder with `cd dev`
|
||||
|
||||
And then start the project with `yarn dev` and pull up `http://localhost:3000` in your browser.
|
||||
And then start the project with `pnpm dev` and pull up `http://localhost:3000` in your browser.
|
||||
|
||||
## Testing
|
||||
|
||||
@@ -112,7 +112,7 @@ Jest organizes tests into test suites and cases. We recommend creating tests bas
|
||||
The plugin template provides a stubbed out test suite at `dev/plugin.spec.ts` which is ready to go - just add in your own test conditions and you're all set!
|
||||
|
||||
```
|
||||
import payload from 'payload'
|
||||
let payload: Payload
|
||||
|
||||
describe('Plugin tests', () => {
|
||||
// Example test to check for seeded data
|
||||
@@ -245,7 +245,7 @@ config.hooks = {
|
||||
```
|
||||
|
||||
### Extending functions
|
||||
Function properties cannot use spread syntax. The way to extend them is to execute the existing function if it exists and then run your additional functionality.
|
||||
Function properties cannot use spread syntax. The way to extend them is to execute the existing function if it exists and then run your additional functionality.
|
||||
|
||||
Here is an example extending the `onInit` property:
|
||||
|
||||
@@ -285,11 +285,11 @@ For a better user experience, provide a way to disable the plugin without uninst
|
||||
|
||||
### Include tests in your GitHub CI workflow
|
||||
|
||||
If you've configured tests for your package, integrate them into your workflow to run the tests each time you commit to the plugin repository. Learn more about [how to configure tests into your GitHub CI workflow.](https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs)
|
||||
If you've configured tests for your package, integrate them into your workflow to run the tests each time you commit to the plugin repository. Learn more about [how to configure tests into your GitHub CI workflow.](https://docs.github.com/en/actions/use-cases-and-examples/building-and-testing/building-and-testing-nodejs)
|
||||
|
||||
### Publish your finished plugin to NPM
|
||||
### Publish your finished plugin to npm
|
||||
|
||||
The best way to share and allow others to use your plugin once it is complete is to publish an NPM package. This process is straightforward and well documented, find out more about [creating and publishing a NPM package here](https://docs.npmjs.com/creating-and-publishing-scoped-public-packages/).
|
||||
The best way to share and allow others to use your plugin once it is complete is to publish an npm package. This process is straightforward and well documented, find out more about [creating and publishing a npm package here](https://docs.npmjs.com/creating-and-publishing-scoped-public-packages/).
|
||||
|
||||
### Add payload-plugin topic tag
|
||||
|
||||
|
||||
@@ -6,7 +6,7 @@ desc: Easily build and manage forms from the Admin Panel. Send dynamic, personal
|
||||
keywords: plugins, plugin, form, forms, form builder
|
||||
---
|
||||
|
||||
[](https://www.npmjs.com/package/@payloadcms/plugin-form-builder)
|
||||
[](https://www.npmjs.com/package/@payloadcms/plugin-form-builder)
|
||||
|
||||
This plugin allows you to build and manage custom forms directly within the [Admin Panel](../admin/overview). Instead of hard-coding a new form into your website or application every time you need one, admins can simply define the schema for each form they need on-the-fly, and your front-end can map over this schema, render its own UI components, and match your brand's design system.
|
||||
|
||||
@@ -33,7 +33,7 @@ Forms can be as simple or complex as you need, from a basic contact form, to a m
|
||||
|
||||
## Installation
|
||||
|
||||
Install the plugin using any JavaScript package manager like [Yarn](https://yarnpkg.com), [NPM](https://npmjs.com), or [PNPM](https://pnpm.io):
|
||||
Install the plugin using any JavaScript package manager like [pnpm](https://pnpm.io), [npm](https://npmjs.com), or [Yarn](https://yarnpkg.com):
|
||||
|
||||
```bash
|
||||
pnpm add @payloadcms/plugin-form-builder
|
||||
|
||||
@@ -6,7 +6,7 @@ desc: Nested documents in a parent, child, and sibling relationship.
|
||||
keywords: plugins, nested, documents, parent, child, sibling, relationship
|
||||
---
|
||||
|
||||
[](https://www.npmjs.com/package/@payloadcms/plugin-nested-docs)
|
||||
[](https://www.npmjs.com/package/@payloadcms/plugin-nested-docs)
|
||||
|
||||
This plugin allows you to easily nest the documents of your application inside of one another. It does so by adding a
|
||||
new `parent` field onto each of your documents that, when selected, attaches itself to the parent's tree. When you edit
|
||||
@@ -44,8 +44,7 @@ but different parents.
|
||||
|
||||
## Installation
|
||||
|
||||
Install the plugin using any JavaScript package manager like [Yarn](https://yarnpkg.com), [NPM](https://npmjs.com),
|
||||
or [PNPM](https://pnpm.io):
|
||||
Install the plugin using any JavaScript package manager like [pnpm](https://pnpm.io), [npm](https://npmjs.com), or [Yarn](https://yarnpkg.com):
|
||||
|
||||
```bash
|
||||
pnpm add @payloadcms/plugin-nested-docs
|
||||
|
||||
@@ -6,7 +6,7 @@ desc: Automatically create redirects for your Payload application
|
||||
keywords: plugins, redirects, redirect, plugin, payload, cms, seo, indexing, search, search engine
|
||||
---
|
||||
|
||||
[](https://www.npmjs.com/package/@payloadcms/plugin-redirects)
|
||||
[](https://www.npmjs.com/package/@payloadcms/plugin-redirects)
|
||||
|
||||
This plugin allows you to easily manage redirects for your application from within your [Admin Panel](../admin/overview). It does so by adding a `redirects` collection to your config that allows you specify a redirect from one URL to another. Your front-end application can use this data to automatically redirect users to the correct page using proper HTTP status codes. This is useful for SEO, indexing, and search engine ranking when re-platforming or when changing your URL structure.
|
||||
|
||||
@@ -29,7 +29,7 @@ For example, if you have a page at `/about` and you want to change it to `/about
|
||||
|
||||
## Installation
|
||||
|
||||
Install the plugin using any JavaScript package manager like [Yarn](https://yarnpkg.com), [NPM](https://npmjs.com), or [PNPM](https://pnpm.io):
|
||||
Install the plugin using any JavaScript package manager like [pnpm](https://pnpm.io), [npm](https://npmjs.com), or [Yarn](https://yarnpkg.com):
|
||||
|
||||
```bash
|
||||
pnpm add @payloadcms/plugin-redirects
|
||||
|
||||
@@ -6,7 +6,7 @@ desc: Generates records of your documents that are extremely fast to search on.
|
||||
keywords: plugins, search, search plugin, search engine, search index, search results, search bar, search box, search field, search form, search input
|
||||
---
|
||||
|
||||
[](https://www.npmjs.com/package/@payloadcms/plugin-search)
|
||||
[](https://www.npmjs.com/package/@payloadcms/plugin-search)
|
||||
|
||||
This plugin generates records of your documents that are extremely fast to search on. It does so by creating a new `search` collection that is indexed in the database then saving a static copy of each of your documents using only search-critical data. Search records are automatically created, synced, and deleted behind-the-scenes as you manage your application's documents.
|
||||
|
||||
@@ -37,7 +37,7 @@ This plugin is a great way to implement a fast, immersive search experience such
|
||||
|
||||
## Installation
|
||||
|
||||
Install the plugin using any JavaScript package manager like [Yarn](https://yarnpkg.com), [NPM](https://npmjs.com), or [PNPM](https://pnpm.io):
|
||||
Install the plugin using any JavaScript package manager like [pnpm](https://pnpm.io), [npm](https://npmjs.com), or [Yarn](https://yarnpkg.com):
|
||||
|
||||
```bash
|
||||
pnpm add @payloadcms/plugin-search
|
||||
|
||||
@@ -6,7 +6,7 @@ desc: Integrate Sentry error tracking into your Payload application
|
||||
keywords: plugins, sentry, error, tracking, monitoring, logging, bug, reporting, performance
|
||||
---
|
||||
|
||||
[](https://www.npmjs.com/package/@payloadcms/plugin-sentry)
|
||||
[](https://www.npmjs.com/package/@payloadcms/plugin-sentry)
|
||||
|
||||
This plugin allows you to integrate [Sentry](https://sentry.io/) seamlessly with your [Payload](https://github.com/payloadcms/payload) application.
|
||||
|
||||
@@ -36,7 +36,7 @@ This multi-faceted software offers a range of features that will help you manage
|
||||
|
||||
## Installation
|
||||
|
||||
Install the plugin using any JavaScript package manager like [Yarn](https://yarnpkg.com), [NPM](https://npmjs.com), or [PNPM](https://pnpm.io):
|
||||
Install the plugin using any JavaScript package manager like [pnpm](https://pnpm.io), [npm](https://npmjs.com), or [Yarn](https://yarnpkg.com):
|
||||
|
||||
```bash
|
||||
pnpm add @payloadcms/plugin-sentry
|
||||
|
||||
@@ -6,7 +6,7 @@ desc: Manage SEO metadata from your Payload admin
|
||||
keywords: plugins, seo, meta, search, engine, ranking, google
|
||||
---
|
||||
|
||||
[](https://www.npmjs.com/package/@payloadcms/plugin-seo)
|
||||
[](https://www.npmjs.com/package/@payloadcms/plugin-seo)
|
||||
|
||||
This plugin allows you to easily manage SEO metadata for your application from within your [Admin Panel](../admin/overview). When enabled on your [Collections](../configuration/collections) and [Globals](../configuration/globals), it adds a new `meta` field group containing `title`, `description`, and `image` by default. Your front-end application can then use this data to render meta tags however your application requires. For example, you would inject a `title` tag into the `<head>` of your page using `meta.title` as its content.
|
||||
|
||||
@@ -34,7 +34,7 @@ To help you visualize what your page might look like in a search engine, a previ
|
||||
|
||||
## Installation
|
||||
|
||||
Install the plugin using any JavaScript package manager like [Yarn](https://yarnpkg.com), [NPM](https://npmjs.com), or [PNPM](https://pnpm.io):
|
||||
Install the plugin using any JavaScript package manager like [pnpm](https://pnpm.io), [npm](https://npmjs.com), or [Yarn](https://yarnpkg.com):
|
||||
|
||||
```bash
|
||||
pnpm add @payloadcms/plugin-seo
|
||||
@@ -277,7 +277,7 @@ Tip: You can override the length rules by changing the minLength and maxLength p
|
||||
All types can be directly imported:
|
||||
|
||||
```ts
|
||||
import {
|
||||
import type {
|
||||
PluginConfig,
|
||||
GenerateTitle,
|
||||
GenerateDescription
|
||||
@@ -288,9 +288,9 @@ import {
|
||||
You can then pass the collections from your generated Payload types into the generation types, for example:
|
||||
|
||||
```ts
|
||||
import { Page } from './payload-types.ts';
|
||||
import type { Page } from './payload-types.ts';
|
||||
|
||||
import { GenerateTitle } from '@payloadcms/plugin-seo/types';
|
||||
import type { GenerateTitle } from '@payloadcms/plugin-seo/types';
|
||||
|
||||
const generateTitle: GenerateTitle<Page> = async ({ doc, locale }) => {
|
||||
return `Website.com — ${doc?.title}`
|
||||
|
||||
@@ -6,7 +6,7 @@ desc: Easily accept payments with Stripe
|
||||
keywords: plugins, stripe, payments, ecommerce
|
||||
---
|
||||
|
||||
[](https://www.npmjs.com/package/@payloadcms/plugin-stripe)
|
||||
[](https://www.npmjs.com/package/@payloadcms/plugin-stripe)
|
||||
|
||||
With this plugin you can easily integrate [Stripe](https://stripe.com) into Payload. Simply provide your Stripe credentials and this plugin will open up a two-way communication channel between the two platforms. This enables you to easily sync data back and forth, as well as proxy the Stripe REST API through Payload's [Access Control](../access-control/overview). Use this plugin to completely offload billing to Stripe and retain full control over your application's data.
|
||||
|
||||
@@ -36,7 +36,7 @@ The beauty of this plugin is the entirety of your application's content and busi
|
||||
|
||||
## Installation
|
||||
|
||||
Install the plugin using any JavaScript package manager like [Yarn](https://yarnpkg.com), [NPM](https://npmjs.com), or [PNPM](https://pnpm.io):
|
||||
Install the plugin using any JavaScript package manager like [pnpm](https://pnpm.io), [npm](https://npmjs.com), or [Yarn](https://yarnpkg.com):
|
||||
|
||||
```bash
|
||||
pnpm add @payloadcms/plugin-stripe
|
||||
|
||||
@@ -43,7 +43,9 @@ But with a `depth` of `1`, the response might look like this:
|
||||
To specify depth in the [Local API](../local-api/overview), you can use the `depth` option in your query:
|
||||
|
||||
```ts
|
||||
const getPosts = async () => {
|
||||
import type { Payload } from 'payload'
|
||||
|
||||
const getPosts = async (payload: Payload) => {
|
||||
const posts = await payload.find({
|
||||
collection: 'posts',
|
||||
depth: 2, // highlight-line
|
||||
|
||||
@@ -19,7 +19,9 @@ Each of these APIs share the same underlying querying language, and fully suppor
|
||||
To query your Documents, you can send any number of [Operators](#operators) through your request:
|
||||
|
||||
```ts
|
||||
const query = {
|
||||
import type { Where } from 'payload'
|
||||
|
||||
const query: Where = {
|
||||
color: {
|
||||
equals: 'blue',
|
||||
},
|
||||
@@ -67,7 +69,9 @@ In addition to defining simple queries, you can join multiple queries together u
|
||||
To join queries, use the `and` or `or` keys in your query object:
|
||||
|
||||
```ts
|
||||
const query = {
|
||||
import type { Where } from 'payload'
|
||||
|
||||
const query: Where = {
|
||||
or: [ // highlight-line
|
||||
{
|
||||
color: {
|
||||
@@ -99,7 +103,9 @@ Written in plain English, if the above query were passed to a `find` operation,
|
||||
When working with nested properties, which can happen when using relational fields, it is possible to use the dot notation to access the nested property. For example, when working with a `Song` collection that has a `artists` field which is related to an `Artists` collection using the `name: 'artists'`. You can access a property within the collection `Artists` like so:
|
||||
|
||||
```js
|
||||
const query = {
|
||||
import type { Where } from 'payload'
|
||||
|
||||
const query: Where = {
|
||||
'artists.featured': {
|
||||
// nested property name to filter on
|
||||
exists: true, // operator to use and boolean value that needs to be true
|
||||
@@ -116,7 +122,9 @@ Writing queries in Payload is simple and consistent across all APIs, with only m
|
||||
The [Local API](../local-api/overview) supports the `find` operation that accepts a raw query object:
|
||||
|
||||
```ts
|
||||
const getPosts = async () => {
|
||||
import type { Payload } from 'payload'
|
||||
|
||||
const getPosts = async (payload: Payload) => {
|
||||
const posts = await payload.find({
|
||||
collection: 'posts',
|
||||
where: {
|
||||
@@ -157,19 +165,20 @@ For this reason, we recommend to use the extremely helpful and ubiquitous [`qs-e
|
||||
|
||||
```ts
|
||||
import { stringify } from 'qs-esm'
|
||||
import type { Where } from 'payload'
|
||||
|
||||
const query = {
|
||||
const query: Where = {
|
||||
color: {
|
||||
equals: 'mint',
|
||||
},
|
||||
// This query could be much more complex
|
||||
// and QS would handle it beautifully
|
||||
// and qs-esm would handle it beautifully
|
||||
}
|
||||
|
||||
const getPosts = async () => {
|
||||
const stringifiedQuery = stringify(
|
||||
{
|
||||
where: query, // ensure that `qs` adds the `where` property, too!
|
||||
where: query, // ensure that `qs-esm` adds the `where` property, too!
|
||||
},
|
||||
{ addQueryPrefix: true },
|
||||
)
|
||||
|
||||
@@ -15,8 +15,10 @@ This is where Payload's `select` feature comes in. Here, you can define exactly
|
||||
To specify `select` in the [Local API](../local-api/overview), you can use the `select` option in your query:
|
||||
|
||||
```ts
|
||||
import type { Payload } from 'payload'
|
||||
|
||||
// Include mode
|
||||
const getPosts = async () => {
|
||||
const getPosts = async (payload: Payload) => {
|
||||
const posts = await payload.find({
|
||||
collection: 'posts',
|
||||
select: {
|
||||
@@ -34,7 +36,7 @@ const getPosts = async () => {
|
||||
}
|
||||
|
||||
// Exclude mode
|
||||
const getPosts = async () => {
|
||||
const getPosts = async (payload: Payload) => {
|
||||
const posts = await payload.find({
|
||||
collection: 'posts',
|
||||
// Select everything except for array and group.number
|
||||
@@ -73,8 +75,9 @@ For this reason, we recommend to use the extremely helpful and ubiquitous [`qs-e
|
||||
|
||||
```ts
|
||||
import { stringify } from 'qs-esm'
|
||||
import type { Where } from 'payload'
|
||||
|
||||
const select = {
|
||||
const select: Where = {
|
||||
text: true,
|
||||
group: {
|
||||
number: true
|
||||
@@ -116,9 +119,6 @@ Loading all of the page content, its related links, and everything else is going
|
||||
```ts
|
||||
import type { CollectionConfig } from 'payload'
|
||||
|
||||
import { lexicalEditor, LinkFeature } from '@payloadcms/richtext-lexical'
|
||||
import { slateEditor } from '@payloadcms/richtext-slate'
|
||||
|
||||
// The TSlug generic can be passed to have type safety for `defaultPopulate`.
|
||||
// If avoided, the `defaultPopulate` type resolves to `SelectType`.
|
||||
export const Pages: CollectionConfig<'pages'> = {
|
||||
@@ -144,7 +144,9 @@ Setting `defaultPopulate` will enforce that each time Payload performs a "popula
|
||||
**Local API:**
|
||||
|
||||
```ts
|
||||
const getPosts = async () => {
|
||||
import type { Payload } from 'payload'
|
||||
|
||||
const getPosts = async (payload: Payload) => {
|
||||
const posts = await payload.find({
|
||||
collection: 'posts',
|
||||
populate: {
|
||||
|
||||
@@ -20,7 +20,9 @@ Because sorting is handled by the database, the field cannot be a [Virtual Field
|
||||
To sort Documents in the [Local API](../local-api/overview), you can use the `sort` option in your query:
|
||||
|
||||
```ts
|
||||
const getPosts = async () => {
|
||||
import type { Payload } from 'payload'
|
||||
|
||||
const getPosts = async (payload: Payload) => {
|
||||
const posts = await payload.find({
|
||||
collection: 'posts',
|
||||
sort: '-createdAt', // highlight-line
|
||||
@@ -33,7 +35,9 @@ const getPosts = async () => {
|
||||
To sort by multiple fields, you can use the `sort` option with fields in an array:
|
||||
|
||||
```ts
|
||||
const getPosts = async () => {
|
||||
import type { Payload } from 'payload'
|
||||
|
||||
const getPosts = async (payload: Payload) => {
|
||||
const posts = await payload.find({
|
||||
collection: 'posts',
|
||||
sort: ['priority', '-createdAt'], // highlight-line
|
||||
|
||||
@@ -213,7 +213,7 @@ export interface Collection1 {
|
||||
|
||||
Now that your types have been generated, payloads local API will now be typed. It is common for users to want to use this in their frontend code, we recommend generating them with Payload and then copying the file over to your frontend codebase. This is the simplest way to get your types into your frontend codebase.
|
||||
|
||||
### Adding an NPM script
|
||||
### Adding an npm script
|
||||
|
||||
<Banner type="warning">
|
||||
<strong>Important</strong>
|
||||
@@ -221,9 +221,9 @@ Now that your types have been generated, payloads local API will now be typed. I
|
||||
Payload needs to be able to find your config to generate your types.
|
||||
</Banner>
|
||||
|
||||
Payload will automatically try and locate your config, but might not always be able to find it. For example, if you are working in a `/src` directory or similar, you need to tell Payload where to find your config manually by using an environment variable. If this applies to you, you can create an NPM script to make generating your types easier.
|
||||
Payload will automatically try and locate your config, but might not always be able to find it. For example, if you are working in a `/src` directory or similar, you need to tell Payload where to find your config manually by using an environment variable. If this applies to you, you can create an npm script to make generating your types easier.
|
||||
|
||||
To add an NPM script to generate your types and show Payload where to find your config, open your `package.json` and update the `scripts` property to the following:
|
||||
To add an npm script to generate your types and show Payload where to find your config, open your `package.json` and update the `scripts` property to the following:
|
||||
|
||||
```
|
||||
{
|
||||
@@ -233,4 +233,4 @@ To add an NPM script to generate your types and show Payload where to find your
|
||||
}
|
||||
```
|
||||
|
||||
Now you can run `yarn generate:types` to easily generate your types.
|
||||
Now you can run `pnpm generate:types` to easily generate your types.
|
||||
|
||||
Reference in New Issue
Block a user