From f8617f98dc6259313dc971ae23ef270a798c5d5d Mon Sep 17 00:00:00 2001
From: Philzen <Philzen@users.noreply.github.com>
Date: Wed, 4 Dec 2024 07:21:27 +0100
Subject: [PATCH 1/2] Add tab for typed TS `beforeQuery` hook examples

---
 docs/docs/cells.md | 61 +++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 60 insertions(+), 1 deletion(-)

diff --git a/docs/docs/cells.md b/docs/docs/cells.md
index addfa2d6b2ac..1e48589c0112 100644
--- a/docs/docs/cells.md
+++ b/docs/docs/cells.md
@@ -143,14 +143,34 @@ export const beforeQuery = (props) => {
 
 For example, if you wanted to turn on Apollo's polling option, and prevent caching, you could export something like this (see Apollo's docs on [polling](https://www.apollographql.com/docs/react/data/queries/#polling) and [caching](https://www.apollographql.com/docs/react/data/queries/#setting-a-fetch-policy))
 
+<Tabs groupId="js-ts">
+<TabItem value="js" label="JavaScript">
+ 
 ```jsx
 export const beforeQuery = (props) => {
   return { variables: props, fetchPolicy: 'no-cache', pollInterval: 2500 }
 }
 ```
 
+</TabItem>
+<TabItem value="ts" label="TypeScript">
+
+```jsx
+export const beforeQuery = (
+  props
+): GraphQLQueryHookOptions<FindBlogPostQuery, FindBlogPostQueryVariables> => {
+  return { variables: props, fetchPolicy: 'no-cache', pollInterval: 2500 }
+}
+```
+
+</TabItem>
+</Tabs>
+
 You can also use `beforeQuery` to populate variables with data not included in the Cell's props (like from React's Context API or a global state management library). If you provide a `beforeQuery` function, the Cell will automatically change the type of its props to match the first argument of the function.
 
+<Tabs groupId="js-ts">
+<TabItem value="js" label="JavaScript">
+
 ```jsx
 // The Cell will take no props: <Cell />
 export const beforeQuery = () => {
@@ -162,15 +182,54 @@ export const beforeQuery = () => {
 }
 ```
 
+</TabItem>
+<TabItem value="ts" label="TypeScript">
+
+```jsx
+// The Cell will take no props: <Cell />
+export const beforeQuery = (): GraphQLQueryHookOptions<
+  ArticlesQuery, ArticlesQueryVariables
+> => {
+  const { currentUser } = useAuth()
+
+  return {
+    variables: { userId: currentUser.id },
+  }
+}
+```
+
+</TabItem>
+</Tabs>
+
+<Tabs groupId="js-ts">
+<TabItem value="js" label="JavaScript">
+
 ```jsx
 // The cell will take 1 prop named "word" that is a string: <Cell word="abc">
-export const beforeQuery = ({ word }: { word: string }) => {
+export const beforeQuery = ({ word }) => {
   return {
     variables: { magicWord: word }
    }
 }
 ```
 
+</TabItem>
+<TabItem value="ts" label="TypeScript">
+
+```jsx
+// The cell will take 1 prop named "word" that is a string: <Cell word="abc">
+export const beforeQuery = (
+  { word }: { word: string }
+): GraphQLQueryHookOptions<FindBlogPostQuery, FindBlogPostQueryVariables> => {
+  return {
+    variables: { magicWord: word }
+   }
+}
+```
+
+</TabItem>
+</Tabs>
+
 ### isEmpty
 
 `isEmpty` is an optional lifecycle hook. It returns a boolean to indicate if the Cell should render empty. Use it to override the default check, which checks if the Cell's root fields are null or empty arrays.

From fc801ceed08ac58a3046bd21097761bca181a530 Mon Sep 17 00:00:00 2001
From: Tobbe Lundberg <tobbe@tlundberg.com>
Date: Thu, 5 Dec 2024 11:44:56 +0100
Subject: [PATCH 2/2] add linebreaks for readability

---
 docs/docs/cells.md | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/docs/docs/cells.md b/docs/docs/cells.md
index 1e48589c0112..6660056c8a9f 100644
--- a/docs/docs/cells.md
+++ b/docs/docs/cells.md
@@ -148,7 +148,11 @@ For example, if you wanted to turn on Apollo's polling option, and prevent cachi
  
 ```jsx
 export const beforeQuery = (props) => {
-  return { variables: props, fetchPolicy: 'no-cache', pollInterval: 2500 }
+  return {
+    variables: props,
+    fetchPolicy: 'no-cache',
+    pollInterval: 2500
+  }
 }
 ```
 
@@ -159,7 +163,11 @@ export const beforeQuery = (props) => {
 export const beforeQuery = (
   props
 ): GraphQLQueryHookOptions<FindBlogPostQuery, FindBlogPostQueryVariables> => {
-  return { variables: props, fetchPolicy: 'no-cache', pollInterval: 2500 }
+  return {
+    variables: props,
+    fetchPolicy: 'no-cache',
+    pollInterval: 2500
+  }
 }
 ```
 
@@ -208,8 +216,8 @@ export const beforeQuery = (): GraphQLQueryHookOptions<
 // The cell will take 1 prop named "word" that is a string: <Cell word="abc">
 export const beforeQuery = ({ word }) => {
   return {
-    variables: { magicWord: word }
-   }
+    variables: { magicWord: word },
+  }
 }
 ```