Skip to content

Commit ff5b5e0

Browse files
committed
feat: allow multiple queries
1 parent 5f071b3 commit ff5b5e0

File tree

2 files changed

+28
-10
lines changed

2 files changed

+28
-10
lines changed

README.md

Lines changed: 24 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,25 @@
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

77
Ideally 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 -->

lib/use-contentful.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,16 @@ type ContentfulOptions = {
66
}
77

88
type ContentfulResponse<T> = {
9-
readonly data: Readonly<Record<string, Readonly<T>>>
9+
readonly data: Readonly<T>
1010
readonly errors: readonly string[]
1111
}
1212

1313
export 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) {

0 commit comments

Comments
 (0)