diff --git a/README.md b/README.md index a0388ae5..249bd3e6 100644 --- a/README.md +++ b/README.md @@ -1,15 +1,25 @@ # Vue Contentful Hook -A hook to call the contentful API +A hook to call the contentful API using GraphQl ## Usage Ideally you should pass env variables as token and spaceId ```ts -export interface Dummy { - readonly items: { - readonly name: string; +export interface Dummy { + readonly dummyCollection: { + readonly total: number; + readonly skip: number; + readonly limit: number; + readonly items: readonly T[]; + }; + + readonly someOtherDummyCollection: { + readonly total: number; + readonly skip: number; + readonly limit: number; + readonly items: readonly U[]; }; } @@ -20,14 +30,22 @@ const query = ` name } } + someOtherDummyCollection { + items { + name + } + } } `; -const { data } = useContentful(query, { +const { data } = useContentful>(query, { token: "myToken", spaceId: "mySpaceId", }); -console.log("data", data.value?.items); +// an array of strings +console.log("data", data.value?.dummyCollection.items); +// an array of numbers +console.log("data", data.value?.dummyCollection.items); ``` diff --git a/lib/use-contentful.ts b/lib/use-contentful.ts index f6d4c41c..3c3bbafd 100644 --- a/lib/use-contentful.ts +++ b/lib/use-contentful.ts @@ -6,7 +6,7 @@ type ContentfulOptions = { } type ContentfulResponse = { - readonly data: Readonly>> + readonly data: Readonly readonly errors: readonly string[] } @@ -14,8 +14,8 @@ export const useContentful = ( query: string, { spaceId, token }: ContentfulOptions, ) => { - const data = ref>() - const errors = ref() + const data = ref['data']>() + const errors = ref['errors']>() const isLoading = ref(true) const URI = `https://graphql.contentful.com/content/v1/spaces/${spaceId}` @@ -35,7 +35,7 @@ export const useContentful = ( isLoading.value = false if (response) { - data.value = response[Object.keys(response)[0]] + data.value = response } if (contenfulErrors) {