From affda60f93ecefeb6261ed069907a20d65181177 Mon Sep 17 00:00:00 2001
From: Rico Kahler <rakahler@umich.edu>
Date: Sat, 2 Jan 2021 12:49:00 -0500
Subject: [PATCH] feat: get-server-side props (#18)

---
 README.md               | 14 ++++++++------
 package-lock.json       |  2 +-
 package.json            |  2 +-
 src/create-data-hook.ts |  6 ++++--
 4 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/README.md b/README.md
index c827291c..a0cc440f 100644
--- a/README.md
+++ b/README.md
@@ -1,21 +1,21 @@
 # next-data-hooks · [![codecov](https://codecov.io/gh/ricokahler/next-data-hooks/branch/main/graph/badge.svg)](https://codecov.io/gh/ricokahler/next-data-hooks) [![github status checks](https://badgen.net/github/checks/ricokahler/next-data-hooks/main)](https://github.com/ricokahler/next-data-hooks/actions) [![bundlephobia](https://badgen.net/bundlephobia/minzip/next-data-hooks)](https://bundlephobia.com/result?p=next-data-hooks)
 
-> Use `getStaticProps` as react hooks
+> Use `getStaticProps` and `getServerSideProps` as react hooks
 
-`next-data-hooks` is a small and simple lib that lets you write React hooks for static data queries in Next.js by lifting static props into React Context.
+`next-data-hooks` is a small and simple lib that lets you write React hooks for data queries in Next.js by lifting static props into React Context.
 
 ```js
 import { createDataHook } from 'next-data-hooks';
 
 const useBlogPost = createDataHook('BlogPost', async (context) => {
   const { slug } = context.params;
-  
-  return // ... get the blog post
+
+  return; // ... get the blog post
 });
 
 function BlogPost() {
   const { title, content } = useBlogPost();
-  
+
   return (
     <>
       <h1>{title}</h1>
@@ -62,6 +62,7 @@ At the root, add a `.babelrc` file that contains the following:
   "plugins": ["next-data-hooks/babel"]
 }
 ```
+
 > ⚠️ Don't forget this step. This enables [**code elimination**](#code-elimination) to eliminate server-side code in client code.
 
 3. Add the provider to `_app.tsx` or `_app.js`
@@ -145,6 +146,7 @@ export const getStaticPaths: GetStaticPaths = async (context) => {
   // return static paths...
 };
 
+// NOTE: this will also work with `getServerSideProps`
 export const getStaticProps: GetStaticProps = async (context) => {
   const dataHooksProps = await getDataHooksProps({
     context,
@@ -231,7 +233,7 @@ function BlogPost() {
   );
 }
 
-BlogPost.dataHooks = [useBlogPostData]
+BlogPost.dataHooks = [useBlogPostData];
 
 export default BlogPost;
 ```
diff --git a/package-lock.json b/package-lock.json
index 6f30b462..9e6bacac 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "next-data-hooks",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index 3b4bdca3..07bffb17 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "next-data-hooks",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Use `getStaticProps` as react hooks",
   "private": true,
   "scripts": {
diff --git a/src/create-data-hook.ts b/src/create-data-hook.ts
index 834a2aef..34a86f72 100644
--- a/src/create-data-hook.ts
+++ b/src/create-data-hook.ts
@@ -1,5 +1,5 @@
 import { useContext } from 'react';
-import { GetStaticPropsContext } from 'next';
+import { GetStaticPropsContext, GetServerSidePropsContext } from 'next';
 import NextDataHooksContext from './next-data-hooks-context';
 
 const stub = () => {
@@ -17,7 +17,9 @@ const stub = () => {
  */
 function createDataHook<R>(
   key: string,
-  getData: (variables: GetStaticPropsContext) => Promise<R>
+  getData: (
+    variables: GetStaticPropsContext | GetServerSidePropsContext
+  ) => Promise<R>
 ) {
   function useData(): R {
     const dataHooksContext = useContext(NextDataHooksContext);