https://github.com/balazsorban44/get-all-static-data

https://github.com/balazsorban44/get-all-static-data

nextjs reactjs ssg typescript

Last synced: 14 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/balazsorban44/get-all-static-data
• Owner: balazsorban44
• Created: 2020-10-11T00:11:00.000Z (about 4 years ago)
• Default Branch: main
• Last Pushed: 2020-10-11T01:50:13.000Z (about 4 years ago)
• Last Synced: 2024-10-20T10:15:41.155Z (19 days ago)
• Topics: nextjs, reactjs, ssg, typescript
• Language: TypeScript
• Homepage:
• Size: 2.93 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# get-all-static-data

> Experimental ⚠

> This is currently under development,

> and probably will not work as advertised.

> The README.md can also be outdated right now.

> Please refer to the source code for further guidance

> Contributions are welcome 🙂

Workaround to 'return data' from Next.js's getStaticPaths

https://github.com/vercel/next.js/discussions/11272

There is no real magic here, it creates a .cache file

that `getStaticProps` will read under build, and reuses the `pathMapper`

to return the correct data.

This is based on this comment https://github.com/vercel/next.js/issues/10933#issuecomment-598297975

## Usage

Available parameters:

```ts

interface GetAllStaticDataParams {

  /** Returns a list of data */

  getData(): Promise

  /** Return a path segment here (This will be returned from `getStaticPaths`) */

  pathMapper(element: D): GetStaticPathsResult["paths"][0]

  /**

   * By default,

   * the `props` return property will equal to the data,

   * and `revalidate is set to `1`.

   * You can override this functino as you like.

   * It is exactly like a `getStaticProps` function, only with `context.data`

   * set to the data returned from `getStaticPaths` with a matching path.

   * See `pathMapper`

   * */

  getStaticPropsWithData?: (context: GetStaticPropsContextWithData) => Promise>

  /** Fallback value for `getStaticPaths`. */

  fallback?: GetStaticPathsResult["fallback"]

}

```

## Example

`getAllStaticData` takes two required params, `getData` and `pathMapper`, and returns two functions

```jsx

import getAllStaticData from "get-all-static-data"

const pageData = getAllStaticData({

  async getData() {

    return [{ slug: "/testing/foo/bar", title: "Foo", updated: "2020-10-11" }]

  },

  pathMapper: element => element.slug,  

})

export const getStaticPaths = pageData.getStaticPaths(require("fs"))

export const getStaticProps = pageData.getStaticProps(require("fs"))

export default function Test({ data }) {

  return 
{JSON.stringify(data, null, 2)}

}

```