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

138
src/routes/+layout.server.ts
View File

@@ -6,86 +6,84 @@ import { PUBLIC_PREVIEW_COUNT } from '$env/static/public'
export const load: PageServerLoad = async () => { export const load: PageServerLoad = async () => {
try { try {
const res = await fetchAPI(` const res = await fetchAPI(`query {
query { locations: location (filter: { status: { _eq: "published" }}) {
locations: location (filter: { status: { _eq: "published" }}) { id
id name
name slug
slug coordinates
coordinates country {
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
name name
slug slug
flag { id } flag { id }
locations { id slug } continent { slug }
} }
date_updated
continents: continent (filter: { countries: { slug: { _neq: "_empty" }}}) { photos (
name sort: "-date_created",
slug limit: ${PUBLIC_PREVIEW_COUNT}
rotation ) {
image {
id
title
}
date_created
} }
has_poster
globe_close
}
settings { countries: country (filter: { status: { _eq: "published" }}) {
seo_name id
seo_title name
seo_description slug
description flag { id }
explore_list locations { id slug }
limit_new }
instagram
footer_links
switcher_links
newsletter_subtitle
newsletter_text
}
shop { continents: continent (filter: { countries: { slug: { _neq: "_empty" }}}) {
enabled name
module_title slug
module_text rotation
module_images { }
directus_files_id {
id settings {
title 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) { if (res) {
const { data: { countPhotos, countLocations, countCountries, ...rest }} = res const { data: { countPhotos, countLocations, countCountries, ...rest }} = res

48
src/routes/+page.server.ts
View File

@@ -6,44 +6,40 @@ import { getRandomItems } from '$utils/functions'
export const load: PageServerLoad = async () => { export const load: PageServerLoad = async () => {
try { try {
// Get total of published photos // Get total of published photos
const totalRes = await fetchAPI(` const totalRes = await fetchAPI(`query {
query { photo (
photo ( filter: {
filter: { favorite: { _eq: true },
favorite: { _eq: true }, status: { _eq: "published" },
status: { _eq: "published" }, },
}, limit: -1,
limit: -1, ) {
) { id
id
}
} }
`) }`)
const { data: { photo: photosIds }} = totalRes const { data: { photo: photosIds }} = totalRes
// Get random photos // Get random photos
const randomPhotosIds = [...getRandomItems(photosIds, 11)].map(({ id }) => id) const randomPhotosIds = [...getRandomItems(photosIds, 11)].map(({ id }) => id)
// Query these random photos from IDs // Query these random photos from IDs
const photosRes = await fetchAPI(` const photosRes = await fetchAPI(`query {
query { photo (filter: { id: { _in: [${randomPhotosIds}] }}) {
photo (filter: { id: { _in: [${randomPhotosIds}] }}) { slug
title
city
location {
name
slug slug
title country {
city
location {
name
slug slug
country { name
slug flag { id }
name
flag { id }
}
} }
image { id }
} }
image { id }
} }
`) }`)
const { data: { photo: photos }} = photosRes const { data: { photo: photos }} = photosRes
if (photos) { if (photos) {

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

@@ -21,63 +21,61 @@ export const load: PageServerLoad = async ({ params }) => {
const { location: slug } = params const { location: slug } = params
// Query // Query
const res = await fetchAPI(` const res = await fetchAPI(`query {
query { location (
location ( filter: {
filter: { slug: { _eq: "${slug}" },
slug: { _eq: "${slug}" }, status: { _eq: "published" },
status: { _eq: "published" }, },
}, ) {
) { id
id name
slug
description
date_updated
illustration_desktop { id }
illustration_desktop_2x { id }
illustration_mobile { id }
credits {
credit_id {
name
website
}
}
country {
name name
slug slug
description flag { id }
date_updated }
illustration_desktop { id } has_poster
illustration_desktop_2x { id } acknowledgement
illustration_mobile { id } }
credits {
credit_id { photos: photo (
name filter: {
website 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 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 loadPhotos = async (page?: number) => {
const res = await fetch('/api/data', { const res = await fetch('/api/data', {
method: 'POST', method: 'POST',
body: ` body: `query {
query { photos: photo (
photos: photo ( filter: {
filter: { location: { slug: { _eq: "${params.location}" }},
location: { slug: { _eq: "${params.location}" }}, status: { _eq: "published" },
status: { _eq: "published" }, },
}, sort: "-date_created",
sort: "-date_created", limit: ${PUBLIC_LIST_INCREMENT},
limit: ${PUBLIC_LIST_INCREMENT}, page: ${page},
page: ${page}, ) {
) { ${photoFields}
${photoFields}
}
} }
`, }`,
}) })
const { data: { photos }} = await res.json() 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 }) => { export const load: PageServerLoad = async ({ params }) => {
try { try {
// Get the first photo ID // Get the first photo ID
const firstPhoto = await fetchAPI(` const firstPhoto = await fetchAPI(`query {
query { photo (search: "${params.photo}") {
photo (search: "${params.photo}") { id
id
}
} }
`) }`)
const firstPhotoId = firstPhoto?.data?.photo[0]?.id const firstPhotoId = firstPhoto?.data?.photo[0]?.id
// TODO: use same request for both queries (photo.id) // TODO: use same request for both queries (photo.id)
const photosBeforeFirst = await fetchAPI(` const photosBeforeFirst = await fetchAPI(`query {
query { count: photo_aggregated (
count: photo_aggregated ( filter: {
filter: { id: { _gt: ${firstPhotoId} },
id: { _gt: ${firstPhotoId} }, location: { slug: { _eq: "${params.location}" }},
location: { slug: { _eq: "${params.location}" }}, status: { _eq: "published" },
status: { _eq: "published" }, },
}, sort: "-id",
sort: "-id", ) {
) { count {
count { id
id
}
} }
} }
`) }`)
// Define offset from the current count // Define offset from the current count
const offset = Math.max(photosBeforeFirst?.data?.count[0]?.count.id - 5, 0) const offset = Math.max(photosBeforeFirst?.data?.count[0]?.count.id - 5, 0)
const limit = 10 const limit = 10
const res = await fetchAPI(` const res = await fetchAPI(`query {
query { photos: photo (
photos: photo ( filter: {
filter: { location: { slug: { _eq: "${params.location}" }}
location: { slug: { _eq: "${params.location}" }} status: { _eq: "published" },
status: { _eq: "published" }, },
}, sort: "-date_created",
sort: "-date_created", limit: ${limit},
limit: ${limit}, offset: ${offset},
offset: ${offset}, ) {
) { id
title
slug
date_taken
image {
id id
title title
slug width, height
date_taken
image {
id
title
width, height
}
city
} }
city
}
location (filter: { slug: { _eq: "${params.location}" }}) { location (filter: { slug: { _eq: "${params.location}" }}) {
id id
name
slug
country {
name name
slug 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 const { data } = res

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

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

114
src/routes/about/+page.server.ts
View File

@@ -6,76 +6,72 @@ import { getRandomItems } from '$utils/functions'
export const load: PageServerLoad = async () => { export const load: PageServerLoad = async () => {
try { try {
// Get data and total of published photos // Get data and total of published photos
const res = await fetchAPI(` const res = await fetchAPI(`query {
query { photos: photo (
photos: photo ( filter: {
filter: { favorite: { _eq: true },
favorite: { _eq: true }, status: { _eq: "published" },
status: { _eq: "published" }, },
}, limit: -1,
limit: -1, ) {
) { id
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
}
} }
`)
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 const { data: { about, photos: photosIds }} = res
// Get random photos // Get random photos
const randomPhotosIds = [...getRandomItems(photosIds, 42)].map(({ id }) => id) const randomPhotosIds = [...getRandomItems(photosIds, 42)].map(({ id }) => id)
// Query these random photos from IDs // Query these random photos from IDs
const photosRes = await fetchAPI(` const photosRes = await fetchAPI(`query {
query { photo (filter: { id: { _in: [${randomPhotosIds}] }}) {
photo (filter: { id: { _in: [${randomPhotosIds}] }}) { id
title
slug
image {
id id
title title
slug
image {
id
title
}
} }
} }
`) }`)
if (photosRes) { if (photosRes) {
const { data: { photo: photos }} = photosRes const { data: { photo: photos }} = photosRes

34
src/routes/credits/+page.server.ts
View File

@@ -4,31 +4,29 @@ import { fetchAPI } from '$utils/api'
export const load: PageServerLoad = async () => { export const load: PageServerLoad = async () => {
try { try {
const res = await fetchAPI(` const res = await fetchAPI(`query {
query { credits {
credits { text
text list
list }
}
credit (filter: { status: { _eq: "published" }}) { credit (filter: { status: { _eq: "published" }}) {
name name
website website
location { location {
location_id (filter: { status: { _eq: "published" }}) { location_id (filter: { status: { _eq: "published" }}) {
name name
slug
country {
slug slug
country { flag {
slug id
flag {
id
}
} }
} }
} }
} }
} }
`) }`)
const { data } = res const { data } = res

76
src/routes/photos/+page.server.ts
View File

@@ -11,53 +11,51 @@ export const load: PageServerLoad = async ({ url }) => {
const querySort = url.searchParams.get('sort') || PUBLIC_FILTERS_DEFAULT_SORT const querySort = url.searchParams.get('sort') || PUBLIC_FILTERS_DEFAULT_SORT
// Query // Query
const res = await fetchAPI(` const res = await fetchAPI(`query {
query { photos: photo (
photos: photo ( filter: {
filter: { ${queryCountry !== 'all' ? `location: { country: { slug: { _eq: "${queryCountry}" }}},` : ''}
${queryCountry !== 'all' ? `location: { country: { slug: { _eq: "${queryCountry}" }}},` : ''} status: { _eq: "published" },
status: { _eq: "published" }, },
}, sort: "${querySort === 'latest' ? '-' : ''}date_created",
sort: "${querySort === 'latest' ? '-' : ''}date_created", limit: ${PUBLIC_GRID_AMOUNT},
limit: ${PUBLIC_GRID_AMOUNT}, page: 1,
page: 1, ) {
) { id
title
slug
image {
id id
title title
}
location {
slug slug
image { name
id region
title country {
}
location {
slug slug
name name
region flag { id }
country {
slug
name
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 const { data } = res

46
src/routes/photos/+page.svelte
View File

@@ -159,38 +159,36 @@
const loadPhotos = async (page: number) => { const loadPhotos = async (page: number) => {
const res = await fetch('/api/data', { const res = await fetch('/api/data', {
method: 'POST', method: 'POST',
body: ` body: `query {
query { photos: photo (
photos: photo ( filter: {
filter: { ${filterCountry !== 'all' ? `location: { country: { slug: { _eq: "${filterCountry}" }} },` : ''}
${filterCountry !== 'all' ? `location: { country: { slug: { _eq: "${filterCountry}" }} },` : ''} status: { _eq: "published" },
status: { _eq: "published" }, },
}, sort: "${filterSort === 'latest' ? '-' : ''}date_created",
sort: "${filterSort === 'latest' ? '-' : ''}date_created", limit: ${PUBLIC_GRID_INCREMENT},
limit: ${PUBLIC_GRID_INCREMENT}, page: ${page},
page: ${page}, ) {
) { id
title
slug
image {
id id
title title
}
location {
slug slug
image { name
id region
title country {
}
location {
slug slug
name name
region flag { id }
country {
slug
name
flag { id }
}
} }
city
} }
city
} }
`, }`,
}) })
const { data: { photos }} = await res.json() const { data: { photos }} = await res.json()

70
src/routes/shop/+layout.server.ts
View File

@@ -6,50 +6,48 @@ import { getProducts } from '$utils/functions/swell'
export const load: PageServerLoad = async () => { export const load: PageServerLoad = async () => {
try { try {
// Get content from API // Get content from API
const res = await fetchAPI(` const res = await fetchAPI(`query {
query { shop {
shop { page_heroimage { id }
page_heroimage { id } }
}
location ( location (
filter: { filter: {
has_poster: { _eq: true }, has_poster: { _eq: true },
status: { _eq: "published" }, status: { _eq: "published" },
}, },
sort: "name" sort: "name"
) { ) {
name
slug
}
posters: product (
filter: { status: { _eq: "published" }}
) {
name
type
description
details
location {
name name
slug slug
} }
product_id
posters: product ( photos_product {
filter: { status: { _eq: "published" }} directus_files_id {
) { id
name title
type
description
details
location {
name
slug
} }
product_id }
photos_product { photos_preview {
directus_files_id { directus_files_id {
id id
title title
}
}
photos_preview {
directus_files_id {
id
title
}
} }
} }
} }
`) }`)
const { data: { shop, location, posters }} = res const { data: { shop, location, posters }} = res

46
src/routes/shop/+page.server.ts
View File

@@ -7,35 +7,33 @@ import { getRandomItem } from '$utils/functions'
export const load: PageServerLoad = async ({}) => { export const load: PageServerLoad = async ({}) => {
try { try {
// Get content from API // Get content from API
const data = await fetchAPI(` const data = await fetchAPI(`query {
query { posters: product (
posters: product ( filter: { status: { _eq: "published" }}
filter: { status: { _eq: "published" }} ) {
) { name
type
description
details
location {
name name
type slug
description }
details product_id
location { photos_product {
name directus_files_id {
slug id
title
} }
product_id }
photos_product { photos_preview {
directus_files_id { directus_files_id {
id id
title title
}
}
photos_preview {
directus_files_id {
id
title
}
} }
} }
} }
`) }`)
if (data) { if (data) {
const randomPoster = getRandomItem(data.data.posters) const randomPoster = getRandomItem(data.data.posters)

42
src/routes/shop/[type]-[name]/+page.server.ts
View File

@@ -6,33 +6,31 @@ import { getProduct } from '$utils/functions/swell'
export const load: PageServerLoad = async ({ params }) => { export const load: PageServerLoad = async ({ params }) => {
try { try {
// Get content from API // Get content from API
const data = await fetchAPI(` const data = await fetchAPI(`query {
query { poster: product (search: "${params.name}") {
poster: product (search: "${params.name}") { name
type
description
details
location {
name name
type slug
description }
details product_id
location { photos_product {
name directus_files_id {
slug id
title
} }
product_id }
photos_product { photos_preview {
directus_files_id { directus_files_id {
id id
title title
}
}
photos_preview {
directus_files_id {
id
title
}
} }
} }
} }
`) }`)
if (data) { if (data) {
const poster = data.data.poster[0] const poster = data.data.poster[0]

34
src/routes/subscribe/+page.server.ts
View File

@@ -4,25 +4,23 @@ import { fetchAPI } from '$utils/api'
export const load: PageServerLoad = async () => { export const load: PageServerLoad = async () => {
try { try {
const res = await fetchAPI(` const res = await fetchAPI(`query {
query { settings {
settings { newsletter_page_text
newsletter_page_text
}
newsletter (
limit: -1,
sort: "-issue",
filter: { status: { _eq: "published" }},
) {
issue
title
date_sent
link
thumbnail { id }
}
} }
`)
newsletter (
limit: -1,
sort: "-issue",
filter: { status: { _eq: "published" }},
) {
issue
title
date_sent
link
thumbnail { id }
}
}`)
const { data } = res const { data } = res