Comments (2)
Hi @MokDevelopment,
This lib is more or less an alternative API to getStaticProps
/getServerSideProps
which means it is only as capable as those APIs.
The hook body is more like a static independent function without context… or index
This isn't exactly true. When you create a data hook, there is a context
parameter that is the same context as the getStaticProps
context or the getServerSideProps
context.
import { createDataHook } from 'next-data-hooks';
// this context is the GetStaticPropsContext from 'next'
// 👇
const useBlogPost = createDataHook('BlogPost', async (context) => {
const slug = context.params?.slug as string;
// do something async to grab the data your component needs
const blogPost = /* ... */;
return blogPost;
});
export default useBlogPost;
You can choose to use this context to run some code conditionally (e.g. based on captured path params or search params). You can use this lib to create a data hook that runs on multiple different pages but the context the data hook receives will differ depending which top-level page component rendered the component with the data hook.
For example, I can create a header component with a data hook and then use that header component on multiple different pages. I can also add some conditional code that looks at the context.params
and changes what's returned.
import { createDataHook } from 'next-data-hooks';
import {startCase} from 'lodash';
const useHeaderData = createDataHook('Header', async (context) => {
const data = await yourDataFetchingFunction();
if (typeof context.params?.slug === 'string') {
return {title: startCase(context.params.slug), data}
}
return {title: 'My App', data}
});
function Header() {
const {title, data} = useHeaderData();
return // ...
}
Header.dataHooks = [useHeaderData];
export default Header;
The useHooks do not carry payloads… this is important to handle specific calls for specific instances of the same component in the same page.
This is true. The result of data hooks cannot differ between the same component on the same page. This is by design. I like to say that this lib is an alternative API to getStaticProps
/getServerSideProps
because the same constraints apply.
If you have multiple instances of the same component but want the results of each component to differ, I would suggest:
- Creating one shared data hook for all possible instances of the component for that page. This would mean returning an array of values that correspond to every instance that should be on that page.
- Passing in a prop to the component. This prop would then be used to find which value from this array corresponds to the current instance.
Example:
const useUserData = createDataHook('User', async (context) => {
const searchTerm = context.query?.q;
// imagine this is a call to your service layer or some fetch
const users = await getUsersFromSearchTerm(searchTerm);
return users;
});
function User({id}) {
const users = useUserData();
const user = users.find((user) => user.id === id);
// etc.
return <>{user.name}</>
}
User.dataHooks = [useUserData];
export default User;
Are there any plans to modify or add payload features in the future ?
No, these data hooks will remain like this by nature of the lib and the underlying next.js APIs.
Note: the primary thing this lib offers is a pattern for better organizing getStaticProps
/getServerSideProps
but it does not offer any more capabilities over vanilla Next.js.
It might be possible in the future to offer parameterized and dynamic data hooks but it would have to work with Next.js SSR. This would require an implementation of React 18 server-side data fetching by Next.js first (which is currently unsupported). See the Next.js Layouts RFC for more info.
from next-data-hooks.
Thank you very much for the detailed answer. I needing to pick up the fact, that the context comes with the hook. In this case it is of course possible to handle all of instances of the component in the same function / hook.
Thanks for making that clear.
I will have another look.
from next-data-hooks.
Related Issues (8)
- Can we have a new release please? HOT 3
- Error when attaching a second DataHook
- Action Required: Fix Renovate Configuration
- generate .dataHooks and getStaticProps with the babel plugin HOT 3
- Dependency Dashboard
- Not working with latest Next HOT 4
- Error serializing `.nextDataHooks.comingSoonPage.config.transformRequest[0]` returned from `getStaticProps HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from next-data-hooks.