From 0e6aaaa4e2ef1667ed2be09ae02f415cf549df38 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= Date: Tue, 16 Aug 2022 21:17:14 +0200 Subject: [PATCH] Make GraphQL queries more compact --- src/routes/+layout.server.ts | 138 +++++++++--------- src/routes/+page.server.ts | 48 +++--- .../[country]/[location]/+page.server.ts | 102 +++++++------ src/routes/[country]/[location]/+page.svelte | 26 ++-- .../[location]/[photo]/+page.server.ts | 94 ++++++------ .../[country]/[location]/[photo]/+page.svelte | 36 +++-- src/routes/about/+page.server.ts | 114 +++++++-------- src/routes/credits/+page.server.ts | 34 ++--- src/routes/photos/+page.server.ts | 76 +++++----- src/routes/photos/+page.svelte | 46 +++--- src/routes/shop/+layout.server.ts | 70 +++++---- src/routes/shop/+page.server.ts | 46 +++--- src/routes/shop/[type]-[name]/+page.server.ts | 42 +++--- src/routes/subscribe/+page.server.ts | 34 ++--- 14 files changed, 435 insertions(+), 471 deletions(-) diff --git a/src/routes/+layout.server.ts b/src/routes/+layout.server.ts index f364612..e4aca4b 100644 --- a/src/routes/+layout.server.ts +++ b/src/routes/+layout.server.ts @@ -6,86 +6,84 @@ import { PUBLIC_PREVIEW_COUNT } from '$env/static/public' export const load: PageServerLoad = async () => { try { - const res = await fetchAPI(` - query { - locations: location (filter: { status: { _eq: "published" }}) { - id - name - slug - coordinates - country { - name - slug - flag { id } - continent { slug } - } - date_updated - photos ( - sort: "-date_created", - limit: ${PUBLIC_PREVIEW_COUNT} - ) { - image { - id - title - } - date_created - } - has_poster - globe_close - } - - countries: country (filter: { status: { _eq: "published" }}) { - id + const res = await fetchAPI(`query { + locations: location (filter: { status: { _eq: "published" }}) { + id + name + slug + coordinates + country { name slug flag { id } - locations { id slug } + continent { slug } } - - continents: continent (filter: { countries: { slug: { _neq: "_empty" }}}) { - name - slug - rotation + date_updated + photos ( + sort: "-date_created", + limit: ${PUBLIC_PREVIEW_COUNT} + ) { + image { + id + title + } + date_created } + has_poster + globe_close + } - settings { - seo_name - seo_title - seo_description - description - explore_list - limit_new - instagram - footer_links - switcher_links - newsletter_subtitle - newsletter_text - } + countries: country (filter: { status: { _eq: "published" }}) { + id + name + slug + flag { id } + locations { id slug } + } - shop { - enabled - module_title - module_text - module_images { - directus_files_id { - id - title - } + continents: continent (filter: { countries: { slug: { _neq: "_empty" }}}) { + name + slug + rotation + } + + settings { + seo_name + seo_title + seo_description + description + explore_list + limit_new + instagram + footer_links + switcher_links + newsletter_subtitle + newsletter_text + } + + shop { + enabled + module_title + module_text + module_images { + directus_files_id { + id + title } } - - # Count - countPhotos: photo_aggregated (filter: { status: { _eq: "published" }}) { - count { id } - } - countLocations: location_aggregated (filter: { status: { _eq: "published" }}) { - count { id } - } - countCountries: country_aggregated (filter: { status: { _eq: "published" }}) { - count { id } - } } - `) + + # Count + countPhotos: photo_aggregated (filter: { status: { _eq: "published" }}) { + count { id } + } + countLocations: location_aggregated (filter: { status: { _eq: "published" }}) { + count { id } + } + countCountries: country_aggregated (filter: { status: { _eq: "published" }}) { + count { id } + } + }`) if (res) { const { data: { countPhotos, countLocations, countCountries, ...rest }} = res diff --git a/src/routes/+page.server.ts b/src/routes/+page.server.ts index 44bf1c9..708efe9 100644 --- a/src/routes/+page.server.ts +++ b/src/routes/+page.server.ts @@ -6,44 +6,40 @@ import { getRandomItems } from '$utils/functions' export const load: PageServerLoad = async () => { try { // Get total of published photos - const totalRes = await fetchAPI(` - query { - photo ( - filter: { - favorite: { _eq: true }, - status: { _eq: "published" }, - }, - limit: -1, - ) { - id - } + const totalRes = await fetchAPI(`query { + photo ( + filter: { + favorite: { _eq: true }, + status: { _eq: "published" }, + }, + limit: -1, + ) { + id } - `) + }`) const { data: { photo: photosIds }} = totalRes // Get random photos const randomPhotosIds = [...getRandomItems(photosIds, 11)].map(({ id }) => id) // Query these random photos from IDs - const photosRes = await fetchAPI(` - query { - photo (filter: { id: { _in: [${randomPhotosIds}] }}) { + const photosRes = await fetchAPI(`query { + photo (filter: { id: { _in: [${randomPhotosIds}] }}) { + slug + title + city + location { + name slug - title - city - location { - name + country { slug - country { - slug - name - flag { id } - } + name + flag { id } } - image { id } } + image { id } } - `) + }`) const { data: { photo: photos }} = photosRes if (photos) { diff --git a/src/routes/[country]/[location]/+page.server.ts b/src/routes/[country]/[location]/+page.server.ts index 3b2c900..057c876 100644 --- a/src/routes/[country]/[location]/+page.server.ts +++ b/src/routes/[country]/[location]/+page.server.ts @@ -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 diff --git a/src/routes/[country]/[location]/+page.svelte b/src/routes/[country]/[location]/+page.svelte index dd6b134..08cc6d0 100644 --- a/src/routes/[country]/[location]/+page.svelte +++ b/src/routes/[country]/[location]/+page.svelte @@ -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() diff --git a/src/routes/[country]/[location]/[photo]/+page.server.ts b/src/routes/[country]/[location]/[photo]/+page.server.ts index 9a49ad4..5577f2f 100644 --- a/src/routes/[country]/[location]/[photo]/+page.server.ts +++ b/src/routes/[country]/[location]/[photo]/+page.server.ts @@ -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 diff --git a/src/routes/[country]/[location]/[photo]/+page.svelte b/src/routes/[country]/[location]/[photo]/+page.svelte index fb04b09..a8f3042 100644 --- a/src/routes/[country]/[location]/[photo]/+page.svelte +++ b/src/routes/[country]/[location]/[photo]/+page.svelte @@ -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() diff --git a/src/routes/about/+page.server.ts b/src/routes/about/+page.server.ts index 2b76163..f3d7cf3 100644 --- a/src/routes/about/+page.server.ts +++ b/src/routes/about/+page.server.ts @@ -6,76 +6,72 @@ import { getRandomItems } from '$utils/functions' export const load: PageServerLoad = async () => { try { // Get data and total of published photos - const res = await fetchAPI(` - query { - photos: photo ( - filter: { - favorite: { _eq: true }, - status: { _eq: "published" }, - }, - limit: -1, - ) { - id - } - - about { - description - intro_firstphoto { - id - title - } - intro_portraits { - id - title - } - intro_text - intro_firstlocation { - slug - country { - flag { id } - slug - } - } - - purpose_text - - process_title - process_subtitle - process_steps { - title - text - image { - id - title - width, height - } - } - process_intention - - contact_title - contact_blocks - } + const res = await fetchAPI(`query { + photos: photo ( + filter: { + favorite: { _eq: true }, + status: { _eq: "published" }, + }, + limit: -1, + ) { + id } - `) + + about { + description + intro_firstphoto { + id + title + } + intro_portraits { + id + title + } + intro_text + intro_firstlocation { + slug + country { + flag { id } + slug + } + } + + purpose_text + + process_title + process_subtitle + process_steps { + title + text + image { + id + title + width, height + } + } + process_intention + + contact_title + contact_blocks + } + }`) const { data: { about, photos: photosIds }} = res // Get random photos const randomPhotosIds = [...getRandomItems(photosIds, 42)].map(({ id }) => id) // Query these random photos from IDs - const photosRes = await fetchAPI(` - query { - photo (filter: { id: { _in: [${randomPhotosIds}] }}) { + const photosRes = await fetchAPI(`query { + photo (filter: { id: { _in: [${randomPhotosIds}] }}) { + id + title + slug + image { id title - slug - image { - id - title - } } } - `) + }`) if (photosRes) { const { data: { photo: photos }} = photosRes diff --git a/src/routes/credits/+page.server.ts b/src/routes/credits/+page.server.ts index 8f17d60..231ff02 100644 --- a/src/routes/credits/+page.server.ts +++ b/src/routes/credits/+page.server.ts @@ -4,31 +4,29 @@ import { fetchAPI } from '$utils/api' export const load: PageServerLoad = async () => { try { - const res = await fetchAPI(` - query { - credits { - text - list - } + const res = await fetchAPI(`query { + credits { + text + list + } - credit (filter: { status: { _eq: "published" }}) { - name - website - location { - location_id (filter: { status: { _eq: "published" }}) { - name + credit (filter: { status: { _eq: "published" }}) { + name + website + location { + location_id (filter: { status: { _eq: "published" }}) { + name + slug + country { slug - country { - slug - flag { - id - } + flag { + id } } } } } - `) + }`) const { data } = res diff --git a/src/routes/photos/+page.server.ts b/src/routes/photos/+page.server.ts index 28452cd..1354477 100644 --- a/src/routes/photos/+page.server.ts +++ b/src/routes/photos/+page.server.ts @@ -11,53 +11,51 @@ export const load: PageServerLoad = async ({ url }) => { const querySort = url.searchParams.get('sort') || PUBLIC_FILTERS_DEFAULT_SORT // Query - const res = await fetchAPI(` - query { - photos: photo ( - filter: { - ${queryCountry !== 'all' ? `location: { country: { slug: { _eq: "${queryCountry}" }}},` : ''} - status: { _eq: "published" }, - }, - sort: "${querySort === 'latest' ? '-' : ''}date_created", - limit: ${PUBLIC_GRID_AMOUNT}, - page: 1, - ) { + const res = await fetchAPI(`query { + photos: photo ( + filter: { + ${queryCountry !== 'all' ? `location: { country: { slug: { _eq: "${queryCountry}" }}},` : ''} + status: { _eq: "published" }, + }, + sort: "${querySort === 'latest' ? '-' : ''}date_created", + limit: ${PUBLIC_GRID_AMOUNT}, + page: 1, + ) { + id + title + slug + image { id title + } + location { slug - image { - id - title - } - location { + name + region + country { slug name - region - country { - slug - name - flag { id } - } + flag { id } } - city - date_created - } - - country: country ( - filter: { - slug: { _eq: "${queryCountry}" }, - status: { _eq: "published" }, - }, - ) { - slug - } - - # Total - total_published: photo_aggregated ${queryCountry !== 'all' ? `(filter: { location: { country: { slug: { _eq: "${queryCountry}" }}}})` : ''} { - count { id } } + city + date_created } - `) + + country: country ( + filter: { + slug: { _eq: "${queryCountry}" }, + status: { _eq: "published" }, + }, + ) { + slug + } + + # Total + total_published: photo_aggregated ${queryCountry !== 'all' ? `(filter: { location: { country: { slug: { _eq: "${queryCountry}" }}}})` : ''} { + count { id } + } + }`) const { data } = res diff --git a/src/routes/photos/+page.svelte b/src/routes/photos/+page.svelte index 3cc1248..1c4283c 100644 --- a/src/routes/photos/+page.svelte +++ b/src/routes/photos/+page.svelte @@ -159,38 +159,36 @@ const loadPhotos = async (page: number) => { const res = await fetch('/api/data', { method: 'POST', - body: ` - query { - photos: photo ( - filter: { - ${filterCountry !== 'all' ? `location: { country: { slug: { _eq: "${filterCountry}" }} },` : ''} - status: { _eq: "published" }, - }, - sort: "${filterSort === 'latest' ? '-' : ''}date_created", - limit: ${PUBLIC_GRID_INCREMENT}, - page: ${page}, - ) { + body: `query { + photos: photo ( + filter: { + ${filterCountry !== 'all' ? `location: { country: { slug: { _eq: "${filterCountry}" }} },` : ''} + status: { _eq: "published" }, + }, + sort: "${filterSort === 'latest' ? '-' : ''}date_created", + limit: ${PUBLIC_GRID_INCREMENT}, + page: ${page}, + ) { + id + title + slug + image { id title + } + location { slug - image { - id - title - } - location { + name + region + country { slug name - region - country { - slug - name - flag { id } - } + flag { id } } - city } + city } - `, + }`, }) const { data: { photos }} = await res.json() diff --git a/src/routes/shop/+layout.server.ts b/src/routes/shop/+layout.server.ts index f887971..c9bc93f 100644 --- a/src/routes/shop/+layout.server.ts +++ b/src/routes/shop/+layout.server.ts @@ -6,50 +6,48 @@ import { getProducts } from '$utils/functions/swell' export const load: PageServerLoad = async () => { try { // Get content from API - const res = await fetchAPI(` - query { - shop { - page_heroimage { id } - } + const res = await fetchAPI(`query { + shop { + page_heroimage { id } + } - location ( - filter: { - has_poster: { _eq: true }, - status: { _eq: "published" }, - }, - sort: "name" - ) { + location ( + filter: { + has_poster: { _eq: true }, + status: { _eq: "published" }, + }, + sort: "name" + ) { + name + slug + } + + posters: product ( + filter: { status: { _eq: "published" }} + ) { + name + type + description + details + location { name slug } - - posters: product ( - filter: { status: { _eq: "published" }} - ) { - name - type - description - details - location { - name - slug + product_id + photos_product { + directus_files_id { + id + title } - product_id - photos_product { - directus_files_id { - id - title - } - } - photos_preview { - directus_files_id { - id - title - } + } + photos_preview { + directus_files_id { + id + title } } } - `) + }`) const { data: { shop, location, posters }} = res diff --git a/src/routes/shop/+page.server.ts b/src/routes/shop/+page.server.ts index 5cf902a..5e480dc 100644 --- a/src/routes/shop/+page.server.ts +++ b/src/routes/shop/+page.server.ts @@ -7,35 +7,33 @@ import { getRandomItem } from '$utils/functions' export const load: PageServerLoad = async ({}) => { try { // Get content from API - const data = await fetchAPI(` - query { - posters: product ( - filter: { status: { _eq: "published" }} - ) { + const data = await fetchAPI(`query { + posters: product ( + filter: { status: { _eq: "published" }} + ) { + name + type + description + details + location { name - type - description - details - location { - name - slug + slug + } + product_id + photos_product { + directus_files_id { + id + title } - product_id - photos_product { - directus_files_id { - id - title - } - } - photos_preview { - directus_files_id { - id - title - } + } + photos_preview { + directus_files_id { + id + title } } } - `) + }`) if (data) { const randomPoster = getRandomItem(data.data.posters) diff --git a/src/routes/shop/[type]-[name]/+page.server.ts b/src/routes/shop/[type]-[name]/+page.server.ts index 531ac72..cea9844 100644 --- a/src/routes/shop/[type]-[name]/+page.server.ts +++ b/src/routes/shop/[type]-[name]/+page.server.ts @@ -6,33 +6,31 @@ import { getProduct } from '$utils/functions/swell' export const load: PageServerLoad = async ({ params }) => { try { // Get content from API - const data = await fetchAPI(` - query { - poster: product (search: "${params.name}") { + const data = await fetchAPI(`query { + poster: product (search: "${params.name}") { + name + type + description + details + location { name - type - description - details - location { - name - slug + slug + } + product_id + photos_product { + directus_files_id { + id + title } - product_id - photos_product { - directus_files_id { - id - title - } - } - photos_preview { - directus_files_id { - id - title - } + } + photos_preview { + directus_files_id { + id + title } } } - `) + }`) if (data) { const poster = data.data.poster[0] diff --git a/src/routes/subscribe/+page.server.ts b/src/routes/subscribe/+page.server.ts index a0be5e9..cb55dad 100644 --- a/src/routes/subscribe/+page.server.ts +++ b/src/routes/subscribe/+page.server.ts @@ -4,25 +4,23 @@ import { fetchAPI } from '$utils/api' export const load: PageServerLoad = async () => { try { - const res = await fetchAPI(` - query { - settings { - newsletter_page_text - } - - newsletter ( - limit: -1, - sort: "-issue", - filter: { status: { _eq: "published" }}, - ) { - issue - title - date_sent - link - thumbnail { id } - } + const res = await fetchAPI(`query { + settings { + newsletter_page_text } - `) + + newsletter ( + limit: -1, + sort: "-issue", + filter: { status: { _eq: "published" }}, + ) { + issue + title + date_sent + link + thumbnail { id } + } + }`) const { data } = res