From 527da03f1ecbf8de12259342386551792656a8e9 Mon Sep 17 00:00:00 2001
From: Laurin Quast <laurinquast@googlemail.com>
Date: Tue, 31 Oct 2023 11:45:23 +0100
Subject: [PATCH] docs: recommend the client and server preset (#9741)

---
 .../src/pages/plugins/typescript/typed-document-node.mdx | 4 ++--
 .../pages/plugins/typescript/typescript-operations.mdx   | 6 ++++++
 .../pages/plugins/typescript/typescript-resolvers.mdx    | 5 +++++
 website/src/pages/plugins/typescript/typescript.mdx      | 9 +++++++++
 4 files changed, 22 insertions(+), 2 deletions(-)

diff --git a/website/src/pages/plugins/typescript/typed-document-node.mdx b/website/src/pages/plugins/typescript/typed-document-node.mdx
index 4759f3604d9..baaedf16182 100644
--- a/website/src/pages/plugins/typescript/typed-document-node.mdx
+++ b/website/src/pages/plugins/typescript/typed-document-node.mdx
@@ -9,8 +9,8 @@ import { pluginGetStaticProps } from '@/lib/plugin-get-static-props'
 export const getStaticProps = pluginGetStaticProps(__filename, { hasOperationsNote: true })
 
 <Callout>
-For new projects, we recommend using the [`client-preset`](/plugins/presets/preset-client), which uses `typed-document-node` under the hood.
-
+  This plugin is meant to be used for low-level use cases or as building block for presets.
+  <br /> For building a **GraphQL client application** we recommend using the [`client-preset`](/plugins/presets/preset-client).
 </Callout>
 
 <PluginHeader />
diff --git a/website/src/pages/plugins/typescript/typescript-operations.mdx b/website/src/pages/plugins/typescript/typescript-operations.mdx
index 7d3af01022a..546521aa9a3 100644
--- a/website/src/pages/plugins/typescript/typescript-operations.mdx
+++ b/website/src/pages/plugins/typescript/typescript-operations.mdx
@@ -3,9 +3,15 @@ title: typescript-operations
 description: Generate TypeScript operations from GraphQL queries. This plugin is based on the `typescript` plugin, but it generates operations instead of types.
 ---
 
+import { Callout } from '@theguild/components'
 import { PluginApiDocs, PluginHeader } from '@/components/plugin'
 import { pluginGetStaticProps } from '@/lib/plugin-get-static-props'
 export const getStaticProps = pluginGetStaticProps(__filename, { hasOperationsNote: true })
 
+<Callout>
+  This plugin is meant to be used for low-level use cases or as building block for presets.
+  <br /> For building a **GraphQL client application** we recommend using the [`client-preset`](/plugins/presets/preset-client).
+</Callout>
+
 <PluginHeader />
 <PluginApiDocs />
diff --git a/website/src/pages/plugins/typescript/typescript-resolvers.mdx b/website/src/pages/plugins/typescript/typescript-resolvers.mdx
index e024b9e20d9..807ce260a10 100644
--- a/website/src/pages/plugins/typescript/typescript-resolvers.mdx
+++ b/website/src/pages/plugins/typescript/typescript-resolvers.mdx
@@ -8,6 +8,11 @@ import { PluginApiDocs, PluginHeader } from '@/components/plugin'
 import { pluginGetStaticProps } from '@/lib/plugin-get-static-props'
 export const getStaticProps = pluginGetStaticProps(__filename, { hasOperationsNote: true })
 
+<Callout>
+  This plugin is meant to be used for low-level use cases or as building block for presets.
+  <br /> For building a **GraphQL server schema** we recommend using the [`server-preset`](/docs/guides/graphql-server-apollo-yoga-with-server-preset).
+</Callout>
+
 <PluginHeader />
 
 <Callout>
diff --git a/website/src/pages/plugins/typescript/typescript.mdx b/website/src/pages/plugins/typescript/typescript.mdx
index 72181b710f8..7d03b1a493e 100644
--- a/website/src/pages/plugins/typescript/typescript.mdx
+++ b/website/src/pages/plugins/typescript/typescript.mdx
@@ -3,9 +3,18 @@ title: typescript
 description: TypeScript plugin. Adds support for TypeScript.
 ---
 
+import { Callout } from '@theguild/components'
 import { PluginApiDocs, PluginHeader } from '@/components/plugin'
 import { pluginGetStaticProps } from '@/lib/plugin-get-static-props'
 export const getStaticProps = pluginGetStaticProps(__filename)
 
+<Callout>
+  This plugin is meant to be used for low-level use cases or as building block for presets.
+  <br /> For building a **GraphQL client application** we recommend using the [`client-preset`](/plugins/presets/preset-client).
+  <br /> For building a **GraphQL server schema** we recommend using the
+  [`server-preset`](/docs/guides/graphql-server-apollo-yoga-with-server-preset).
+</Callout>
+
 <PluginHeader />
+
 <PluginApiDocs />