flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Make GraphQL queries more compact

Browse Source
This commit is contained in:
Félix Péault
2022-08-16 21:17:14 +02:00
parent 52e0407700
commit 0e6aaaa4e2
14 changed files with 435 additions and 471 deletions
Download Patch File Download Diff File Expand all files Collapse all files

102
src/routes/[country]/[location]/+page.server.ts
View File

@@ -21,63 +21,61 @@ export const load: PageServerLoad = async ({ params }) => {
const { location: slug } = params
// Query
const res = await fetchAPI(`
query {
location (
filter: {
slug: { _eq: "${slug}" },
status: { _eq: "published" },
},
) {
id
const res = await fetchAPI(`query {
location (
filter: {
slug: { _eq: "${slug}" },
status: { _eq: "published" },
},
) {
id
name
slug
description
date_updated
illustration_desktop { id }
illustration_desktop_2x { id }
illustration_mobile { id }
credits {
credit_id {
name
website
}
}
country {
name
slug
description
date_updated
illustration_desktop { id }
illustration_desktop_2x { id }
illustration_mobile { id }
credits {
credit_id {
name
website
}
flag { id }
}
has_poster
acknowledgement
}
photos: photo (
filter: {
location: { slug: { _eq: "${slug}" }}
},
sort: "-date_created",
limit: ${PUBLIC_LIST_AMOUNT},
page: 1,
) {
${photoFields}
}
# Total
total_published: photo_aggregated (filter: { location: { slug: { _eq: "${slug}" }}}) {
count { location }
}
# Shop product
product (filter: { location: { slug: { _eq: "${slug}" }}}) {
photos_product {
directus_files_id {
id
}
country {
name
slug
flag { id }
}
has_poster
acknowledgement
}
photos: photo (
filter: {
location: { slug: { _eq: "${slug}" }}
},
sort: "-date_created",
limit: ${PUBLIC_LIST_AMOUNT},
page: 1,
) {
${photoFields}
}
# Total
total_published: photo_aggregated (filter: { location: { slug: { _eq: "${slug}" }}}) {
count { location }
}
# Shop product
product (filter: { location: { slug: { _eq: "${slug}" }}}) {
photos_product {
directus_files_id {
id
}
}
}
}
`)
}`)
const { data: { location: location, photos, total_published, product }} = res

26
src/routes/[country]/[location]/+page.svelte
View File

@@ -75,21 +75,19 @@
const loadPhotos = async (page?: number) => {
const res = await fetch('/api/data', {
method: 'POST',
body: `
query {
photos: photo (
filter: {
location: { slug: { _eq: "${params.location}" }},
status: { _eq: "published" },
},
sort: "-date_created",
limit: ${PUBLIC_LIST_INCREMENT},
page: ${page},
) {
${photoFields}
}
body: `query {
photos: photo (
filter: {
location: { slug: { _eq: "${params.location}" }},
status: { _eq: "published" },
},
sort: "-date_created",
limit: ${PUBLIC_LIST_INCREMENT},
page: ${page},
) {
${photoFields}
}
`,
}`,
})
const { data: { photos }} = await res.json()

94
src/routes/[country]/[location]/[photo]/+page.server.ts
View File

@@ -5,75 +5,69 @@ import { fetchAPI } from '$utils/api'
export const load: PageServerLoad = async ({ params }) => {
try {
// Get the first photo ID
const firstPhoto = await fetchAPI(`
query {
photo (search: "${params.photo}") {
id
}
const firstPhoto = await fetchAPI(`query {
photo (search: "${params.photo}") {
id
}
`)
}`)
const firstPhotoId = firstPhoto?.data?.photo[0]?.id
// TODO: use same request for both queries (photo.id)
const photosBeforeFirst = await fetchAPI(`
query {
count: photo_aggregated (
filter: {
id: { _gt: ${firstPhotoId} },
location: { slug: { _eq: "${params.location}" }},
status: { _eq: "published" },
},
sort: "-id",
) {
count {
id
}
const photosBeforeFirst = await fetchAPI(`query {
count: photo_aggregated (
filter: {
id: { _gt: ${firstPhotoId} },
location: { slug: { _eq: "${params.location}" }},
status: { _eq: "published" },
},
sort: "-id",
) {
count {
id
}
}
`)
}`)
// Define offset from the current count
const offset = Math.max(photosBeforeFirst?.data?.count[0]?.count.id - 5, 0)
const limit = 10
const res = await fetchAPI(`
query {
photos: photo (
filter: {
location: { slug: { _eq: "${params.location}" }}
status: { _eq: "published" },
},
sort: "-date_created",
limit: ${limit},
offset: ${offset},
) {
const res = await fetchAPI(`query {
photos: photo (
filter: {
location: { slug: { _eq: "${params.location}" }}
status: { _eq: "published" },
},
sort: "-date_created",
limit: ${limit},
offset: ${offset},
) {
id
title
slug
date_taken
image {
id
title
slug
date_taken
image {
id
title
width, height
}
city
width, height
}
city
}
location (filter: { slug: { _eq: "${params.location}" }}) {
id
location (filter: { slug: { _eq: "${params.location}" }}) {
id
name
slug
country {
name
slug
country {
name
slug
}
}
total_published: photo_aggregated (filter: { location: { slug: { _eq: "${params.location}" }}}) {
count { location }
}
}
`)
total_published: photo_aggregated (filter: { location: { slug: { _eq: "${params.location}" }}}) {
count { location }
}
}`)
const { data } = res

36
src/routes/[country]/[location]/[photo]/+page.svelte
View File

@@ -152,29 +152,27 @@
const isPrev = direction === directions.PREV
const res = await fetch('/api/data', {
method: 'POST',
body: `
query {
photos: photo (
filter: {
location: { slug: { _eq: "${location.slug}" }},
id: { _${isPrev ? 'gt' : 'lt'}: ${id} },
status: { _eq: "published" },
},
sort: "${isPrev ? '' : '-'}id",
limit: ${limit},
) {
body: `query {
photos: photo (
filter: {
location: { slug: { _eq: "${location.slug}" }},
id: { _${isPrev ? 'gt' : 'lt'}: ${id} },
status: { _eq: "published" },
},
sort: "${isPrev ? '' : '-'}id",
limit: ${limit},
) {
id
title
slug
date_taken
image {
id
title
slug
date_taken
image {
id
title
}
city
}
city
}
`,
}`,
})
const { data: { photos: newPhotos }} = await res.json()