Skip to content

docs: Document using models on the client only - #739

Open
abdulawalarif wants to merge 1 commit into
serverpod:mainfrom
abdulawalarif:docs/3670-client-side-only-models
Open

docs: Document using models on the client only#739
abdulawalarif wants to merge 1 commit into
serverpod:mainfrom
abdulawalarif:docs/3670-client-side-only-models

Conversation

@abdulawalarif

Copy link
Copy Markdown
Contributor

Summary

Working with models covered serverOnly and field scope, but not that you can define models you only use in Flutter. There is no clientOnly flag. Place the YAML in the server package as usual; generating the class on the server as well is harmless.

Fixes serverpod/serverpod#3670

Changes

  • Add a "Using models on the client only" section after the visibility examples.
  • Show placing the .spy.yaml file in the server package, running code generation, and importing the class from the client package.
  • Note that omitting table avoids creating a database table, and point to immutable: true and shared packages.

Reference


```yaml
class: CartItem
immutable: true

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggestion: drop immutable: true from this example. The page only introduces immutability further down, and the sentence below the example already points readers there when they need value equality.

Suggested change
immutable: true


You can define models that you only use in the Flutter app, for example to hold local UI state or form data. Leave `serverOnly` unset so the class is generated for the client. There is no separate `clientOnly` flag.

Place the `.spy.yaml` file anywhere in the server's `lib` directory, run code generation, and import the class from the client package.

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggestion: mirror how the intro of this page describes code generation, so both spots teach the same loop.

Suggested change
Place the `.spy.yaml` file anywhere in the server's `lib` directory, run code generation, and import the class from the client package.
Place the `.spy.yaml` file anywhere in the server's `lib` directory. With `serverpod start` running, saving the file regenerates the code; otherwise run `serverpod generate`. Then import the class from the client package.

```

```dart
import 'package:my_project_client/my_project_client.dart';

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggestion: the other import examples in the docs use your_client, so keeping that name here helps readers connect them.

Suggested change
import 'package:my_project_client/my_project_client.dart';
import 'package:your_client/your_client.dart';

var item = CartItem(productId: 'sku-1', quantity: 2);
```

The class is also generated on the server. That is harmless: omit the `table` key so no database table is created, and you do not need to use the class in any endpoint. Set `immutable: true` if you want value equality for Flutter state management. See [Immutable classes](#immutable-classes).

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggestion: this reads as if omitting table is what makes the server copy harmless; the two facts sit side by side rather than cause and effect.

Suggested change
The class is also generated on the server. That is harmless: omit the `table` key so no database table is created, and you do not need to use the class in any endpoint. Set `immutable: true` if you want value equality for Flutter state management. See [Immutable classes](#immutable-classes).
The class is also generated on the server, which is harmless: without a `table` key no database table is created, and nothing requires you to use the class in an endpoint. Set `immutable: true` if you want value equality for Flutter state management. See [Immutable classes](#immutable-classes).

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Mention creating models that are used client-side only

2 participants