File tree Expand file tree Collapse file tree 2 files changed +28
-10
lines changed Expand file tree Collapse file tree 2 files changed +28
-10
lines changed Original file line number Diff line number Diff line change 11# Vue Contentful Hook
22
3- A hook to call the contentful API
3+ A hook to call the contentful API using GraphQl
44
55## Usage
66
77Ideally you should pass env variables as token and spaceId
88
99``` ts
10- export interface Dummy {
11- readonly items: {
12- readonly name: string ;
10+ export interface Dummy <T , U > {
11+ readonly dummyCollection: {
12+ readonly total: number ;
13+ readonly skip: number ;
14+ readonly limit: number ;
15+ readonly items: readonly T [];
16+ };
17+
18+ readonly someOtherDummyCollection: {
19+ readonly total: number ;
20+ readonly skip: number ;
21+ readonly limit: number ;
22+ readonly items: readonly U [];
1323 };
1424}
1525
@@ -20,14 +30,22 @@ const query = `
2030 name
2131 }
2232 }
33+ someOtherDummyCollection {
34+ items {
35+ name
36+ }
37+ }
2338 }
2439` ;
25- const { data } = useContentful <Dummy >(query , {
40+ const { data } = useContentful <Dummy < string , number > >(query , {
2641 token: " myToken" ,
2742 spaceId: " mySpaceId" ,
2843});
2944
30- console .log (" data" , data .value ?.items );
45+ // an array of strings
46+ console .log (" data" , data .value ?.dummyCollection .items );
47+ // an array of numbers
48+ console .log (" data" , data .value ?.dummyCollection .items );
3149```
3250
3351<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
Original file line number Diff line number Diff line change @@ -6,16 +6,16 @@ type ContentfulOptions = {
66}
77
88type ContentfulResponse < T > = {
9- readonly data : Readonly < Record < string , Readonly < T > > >
9+ readonly data : Readonly < T >
1010 readonly errors : readonly string [ ]
1111}
1212
1313export const useContentful = < T > (
1414 query : string ,
1515 { spaceId, token } : ContentfulOptions ,
1616) => {
17- const data = ref < Readonly < T > > ( )
18- const errors = ref < readonly string [ ] > ( )
17+ const data = ref < ContentfulResponse < T > [ 'data' ] > ( )
18+ const errors = ref < ContentfulResponse < T > [ 'errors' ] > ( )
1919 const isLoading = ref < boolean > ( true )
2020
2121 const URI = `https://graphql.contentful.com/content/v1/spaces/${ spaceId } `
@@ -35,7 +35,7 @@ export const useContentful = <T>(
3535 isLoading . value = false
3636
3737 if ( response ) {
38- data . value = response [ Object . keys ( response ) [ 0 ] ]
38+ data . value = response
3939 }
4040
4141 if ( contenfulErrors ) {
You can’t perform that action at this time.
0 commit comments