feat: is server side context type guard (#19)

* feat: is server side context type guard

* update readme

* Update README.md

README.md

@@ -103,6 +103,31 @@ const useBlogPost = createDataHook('BlogPost', async (context) => {
 export default useBlogPost;
 ```
 
+<details>
+<summary>
+TypeScript User?
+
+> Note: For TypeScript users, if you're planning on only using the data hook in the context of `getServerSideProps`, you can import the provided [type guard](https://www.typescriptlang.org/docs/handbook/advanced-types.html#user-defined-type-guards), `isServerSidePropsContext`, to narrow the type of the incoming context.
+
+</summary>
+
+```tsx
+import { createDataHook, isServerSidePropsContext } from 'next-data-hooks';
+
+const useServerSideData = createDataHook('Data', async (context) => {
+ if (!isServerSidePropsContext(context)) {
+ throw new Error('This data hook only works in getServerSideProps.');
+ }
+
+ // here, the type of `context` has been narrowed to the server side conext
+ const query = context.req.query;
+});
+
+export default useServerSideData;
+```
+
+</details>
+
 2. Use the data hook in a component. Add it to a static prop in an array with other data hooks to compose them downward.
 
 ```tsx
@@ -135,7 +160,7 @@ BlogPostComponent.dataHooks = [
 export default BlogPostComponent;
 ```
 
-3. Pass the data hooks down in `getStaticProps`.
+3. Pass the data hooks down in `getStaticProps` or `getServerSideProps`.
 
 ```tsx
 import { getDataHooksProps } from 'next-data-hooks';

package.json

@@ -1,6 +1,6 @@
 {
  "name": "next-data-hooks",
- "version": "0.4.0",
+ "version": "0.5.0",
  "description": "Use `getStaticProps` as react hooks",
  "private": true,
  "scripts": {

src/index.ts

@@ -2,3 +2,4 @@ export { default as createDataHook } from './create-data-hook';
 export { default as getDataHooksProps } from './get-data-hooks-props';
 export { default as NextDataHooksContext } from './next-data-hooks-context';
 export { default as NextDataHooksProvider } from './next-data-hooks-provider';
+export { default as isServerSidePropsContext } from './is-server-side-props-context';

src/is-server-side-props-context.test.ts

@@ -0,0 +1,6 @@
+import isServerSidePropsContext from './is-server-side-props-context';
+
+it('returns true if there is a req and res', () => {
+ expect(isServerSidePropsContext({ req: true, res: true } as any)).toBe(true);
+ expect(isServerSidePropsContext({} as any)).toBe(false);
+});

src/is-server-side-props-context.ts

@@ -0,0 +1,14 @@
+import { GetServerSidePropsContext, GetStaticPropsContext } from 'next';
+
+function isServerSidePropsContext(
+ context: GetServerSidePropsContext | GetStaticPropsContext
+): context is GetServerSidePropsContext {
+ if (typeof context !== 'object' || !context) return false;
+
+ return (
+ !!(context as GetServerSidePropsContext).req &&
+ !!(context as GetServerSidePropsContext).res
+ );
+}
+
+export default isServerSidePropsContext;