preswr
v1.0.0
Published
Preload your SWR hooks on the server
Downloads
12
Readme
Introduction
PreSWR
is a wrapper over swr
that keeps track of your
calls and lets you preload its results. It's oriented as a tool to help with
Server-Side Rendering, and quite suited for use with
Next.js
, although its design is environment-agnostic.
$ yarn add preswr
import usePreSWR, { preloaded } from "preswr"
import React from "react"
const FavouritePokemon = preloaded(({ name }) => {
const { data } = usePreSWR(`https://pokeapi.co/api/v2/pokemon/${name}/`)
return (
<p>
My favourite Pokémon is ${data.name}, of type ${data.types[0].type.name}
</p>
)
})
export default FavouritePokemon.Component
export const getStaticProps = async ({ params }) =>
await FavouritePokemon.preloadData({ name: params.name })
Usage
usePreSWR
The default export is the hook function usePreSWR
, which wraps useSWR
with
the preloading smarts. It has the same arguments.
It is allowed to mix usePreSWR
calls and useSWR
calls freely, but only the
usePreSWR
will be preloaded.
PreSWRConfig
usePreSWR
can't read the config from the <SWRConfig>
provider. We export a
<PreSWRConfig>
that works for both.
preloaded
It's a function which takes a React
component, and an optional options object,
and returns an object with two properties.
preloaded(
MyComponent,
/* this object, and all its properties, are optional */
{
/**
* PreSWR analyzes the tree multiple times to make sure that all
* conditional rendering is taken care of. You can configure how many times
* this can happen, or set `false` to disable deep analyzing.
*/
maxDepth: 20,
}
)
Component
is your original component, but it takes an extra prop with the preloaded data. You need to use this component in place of the original one to take advantage of the preloading.preloadData()
takes the props you'd call your component with, preloads the data which it would request, and returns the props with an extra one which holds the preloaded data.
Limitations
- It only works with ReactDOM, so no support for React Native (yet?)
- Make sure you follow the Rules of Hooks
- When
preloadData
is called, your React component is rendered in the background (maybe multiple times!), which might invoke side-effects if your code uses them. - Your
fetcher
functions must work in the context you're usingpreloadData()
. You can provide aninitialData
config key in the call to bypass calling them. - Your
key
s (or the value returned fromkey
functions) must be able to be serialized to JSON (that means numbers, strings, null, arrays, and plain objects).
TypeScript
This package is written in TypeScript, and it exports a number of helpful types.
An especially useful type is PreloaderProps<...>
, which returns the type of
the props of the wrapped component, including the extra internal prop which
holds the preloaded data.
import { GetStaticProps } from "next"
import { preloaded, PreloaderProps } from "preswr"
import FooComponent from "./foo"
const PreloadedFoo = preloaded(FooComponent)
export default PreloadedFoo.Component
export const getStaticProps: GetStaticProps<PreloaderProps<
typeof PreloadedFoo
>> = async ({ params }) =>
await FavouritePokemon.preloadData({ name: params.name })