Move API fetch data to different file

Sharing multiple exportable functions in one file impacts the use of private env variables 🤷
This commit is contained in:
2022-08-16 20:00:52 +02:00
parent 6e904850aa
commit 93a50770d0
16 changed files with 50 additions and 47 deletions

View File

@@ -28,7 +28,7 @@
"@sveltejs/adapter-auto": "^1.0.0-next.64", "@sveltejs/adapter-auto": "^1.0.0-next.64",
"@sveltejs/adapter-node": "^1.0.0-next.86", "@sveltejs/adapter-node": "^1.0.0-next.86",
"@sveltejs/adapter-vercel": "^1.0.0-next.66", "@sveltejs/adapter-vercel": "^1.0.0-next.66",
"@sveltejs/kit": "^1.0.0-next.410", "@sveltejs/kit": "^1.0.0-next.411",
"@typescript-eslint/eslint-plugin": "^5.33.1", "@typescript-eslint/eslint-plugin": "^5.33.1",
"@typescript-eslint/parser": "^5.33.1", "@typescript-eslint/parser": "^5.33.1",
"browserslist": "^4.21.3", "browserslist": "^4.21.3",

14
pnpm-lock.yaml generated
View File

@@ -5,7 +5,7 @@ specifiers:
'@sveltejs/adapter-auto': ^1.0.0-next.64 '@sveltejs/adapter-auto': ^1.0.0-next.64
'@sveltejs/adapter-node': ^1.0.0-next.86 '@sveltejs/adapter-node': ^1.0.0-next.86
'@sveltejs/adapter-vercel': ^1.0.0-next.66 '@sveltejs/adapter-vercel': ^1.0.0-next.66
'@sveltejs/kit': ^1.0.0-next.410 '@sveltejs/kit': ^1.0.0-next.411
'@typescript-eslint/eslint-plugin': ^5.33.1 '@typescript-eslint/eslint-plugin': ^5.33.1
'@typescript-eslint/parser': ^5.33.1 '@typescript-eslint/parser': ^5.33.1
browserslist: ^4.21.3 browserslist: ^4.21.3
@@ -47,7 +47,7 @@ devDependencies:
'@sveltejs/adapter-auto': 1.0.0-next.64 '@sveltejs/adapter-auto': 1.0.0-next.64
'@sveltejs/adapter-node': 1.0.0-next.86 '@sveltejs/adapter-node': 1.0.0-next.86
'@sveltejs/adapter-vercel': 1.0.0-next.66 '@sveltejs/adapter-vercel': 1.0.0-next.66
'@sveltejs/kit': 1.0.0-next.410_svelte@3.49.0+vite@3.0.8 '@sveltejs/kit': 1.0.0-next.411_svelte@3.49.0+vite@3.0.8
'@typescript-eslint/eslint-plugin': 5.33.1_vsoshirnpb7xw6mr7xomgfas2i '@typescript-eslint/eslint-plugin': 5.33.1_vsoshirnpb7xw6mr7xomgfas2i
'@typescript-eslint/parser': 5.33.1_4rv7y5c6xz3vfxwhbrcxxi73bq '@typescript-eslint/parser': 5.33.1_4rv7y5c6xz3vfxwhbrcxxi73bq
browserslist: 4.21.3 browserslist: 4.21.3
@@ -461,8 +461,8 @@ packages:
- supports-color - supports-color
dev: true dev: true
/@sveltejs/kit/1.0.0-next.410_svelte@3.49.0+vite@3.0.8: /@sveltejs/kit/1.0.0-next.411_svelte@3.49.0+vite@3.0.8:
resolution: {integrity: sha512-/EGeitdSnm0GlAL6fH9vDtzYZsrXSEzSmDE9eoOQa6XfFZMPmgeV8fPReJtqlp+oLR4Q5I/eSV21yrvtoR+reQ==} resolution: {integrity: sha512-VSkQemKpztgsKjjkrp9kkYI7ESe3mspXjibKaevJ+FzTcJqB1Ehnp8lRbspXqXGtumrLLNADpLJ9c9vhXhhsSA==}
engines: {node: '>=16.9'} engines: {node: '>=16.9'}
hasBin: true hasBin: true
requiresBuild: true requiresBuild: true
@@ -522,8 +522,8 @@ packages:
resolution: {integrity: sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==} resolution: {integrity: sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==}
dev: true dev: true
/@types/node/18.7.5: /@types/node/18.7.6:
resolution: {integrity: sha512-NcKK6Ts+9LqdHJaW6HQmgr7dT/i3GOHG+pt6BiWv++5SnjtRd4NXeiuN2kA153SjhXPR/AhHIPHPbrsbpUVOww==} resolution: {integrity: sha512-EdxgKRXgYsNITy5mjjXjVE/CS8YENSdhiagGrLqjG0pvA2owgJ6i4l7wy/PFZGC0B1/H20lWKN7ONVDNYDZm7A==}
dev: true dev: true
/@types/pug/2.0.6: /@types/pug/2.0.6:
@@ -533,7 +533,7 @@ packages:
/@types/sass/1.43.1: /@types/sass/1.43.1:
resolution: {integrity: sha512-BPdoIt1lfJ6B7rw35ncdwBZrAssjcwzI5LByIrYs+tpXlj/CAkuVdRsgZDdP4lq5EjyWzwxZCqAoFyHKFwp32g==} resolution: {integrity: sha512-BPdoIt1lfJ6B7rw35ncdwBZrAssjcwzI5LByIrYs+tpXlj/CAkuVdRsgZDdP4lq5EjyWzwxZCqAoFyHKFwp32g==}
dependencies: dependencies:
'@types/node': 18.7.5 '@types/node': 18.7.6
dev: true dev: true
/@typescript-eslint/eslint-plugin/5.33.1_vsoshirnpb7xw6mr7xomgfas2i: /@typescript-eslint/eslint-plugin/5.33.1_vsoshirnpb7xw6mr7xomgfas2i:

View File

@@ -1,6 +1,6 @@
import { error } from '@sveltejs/kit' import { error } from '@sveltejs/kit'
import type { PageServerLoad } from './$types' import type { PageServerLoad } from './$types'
import { fetchAPI } from '$utils/api' import { fetchAPI } from '$utils/api/data'
import { PUBLIC_PREVIEW_COUNT } from '$env/static/public' import { PUBLIC_PREVIEW_COUNT } from '$env/static/public'

View File

@@ -1,6 +1,6 @@
import { error } from '@sveltejs/kit' import { error } from '@sveltejs/kit'
import type { PageServerLoad } from './$types' import type { PageServerLoad } from './$types'
import { fetchAPI } from '$utils/api' import { fetchAPI } from '$utils/api/data'
import { getRandomItems } from '$utils/functions' import { getRandomItems } from '$utils/functions'
export const load: PageServerLoad = async () => { export const load: PageServerLoad = async () => {

View File

@@ -1,7 +1,7 @@
import { error } from '@sveltejs/kit' import { error } from '@sveltejs/kit'
import type { PageServerLoad } from './$types' import type { PageServerLoad } from './$types'
import { PUBLIC_LIST_AMOUNT } from '$env/static/public' import { PUBLIC_LIST_AMOUNT } from '$env/static/public'
import { fetchAPI } from '$utils/api' import { fetchAPI } from '$utils/api/data'
export const photoFields = ` export const photoFields = `
title title

View File

@@ -1,6 +1,6 @@
import { error } from '@sveltejs/kit' import { error } from '@sveltejs/kit'
import type { PageServerLoad } from './$types' import type { PageServerLoad } from './$types'
import { fetchAPI } from '$utils/api' import { fetchAPI } from '$utils/api/data'
export const load: PageServerLoad = async ({ params }) => { export const load: PageServerLoad = async ({ params }) => {
try { try {

View File

@@ -1,6 +1,6 @@
import { error } from '@sveltejs/kit' import { error } from '@sveltejs/kit'
import type { PageServerLoad } from './$types' import type { PageServerLoad } from './$types'
import { fetchAPI } from '$utils/api' import { fetchAPI } from '$utils/api/data'
import { getRandomItems } from '$utils/functions' import { getRandomItems } from '$utils/functions'
export const load: PageServerLoad = async () => { export const load: PageServerLoad = async () => {

View File

@@ -1,6 +1,6 @@
import { error } from '@sveltejs/kit' import { error } from '@sveltejs/kit'
import type { RequestHandler } from './$types' import type { RequestHandler } from './$types'
import { fetchAPI } from '$utils/api' import { fetchAPI } from '$utils/api/data'
export const POST: RequestHandler = async ({ request }) => { export const POST: RequestHandler = async ({ request }) => {

View File

@@ -1,6 +1,6 @@
import { error } from '@sveltejs/kit' import { error } from '@sveltejs/kit'
import type { PageServerLoad } from './$types' import type { PageServerLoad } from './$types'
import { fetchAPI } from '$utils/api' import { fetchAPI } from '$utils/api/data'
export const load: PageServerLoad = async () => { export const load: PageServerLoad = async () => {
try { try {

View File

@@ -1,6 +1,6 @@
import { error } from '@sveltejs/kit' import { error } from '@sveltejs/kit'
import type { PageServerLoad } from './$types' import type { PageServerLoad } from './$types'
import { fetchAPI } from '$utils/api' import { fetchAPI } from '$utils/api/data'
import { PUBLIC_FILTERS_DEFAULT_COUNTRY, PUBLIC_FILTERS_DEFAULT_SORT, PUBLIC_GRID_AMOUNT } from '$env/static/public' import { PUBLIC_FILTERS_DEFAULT_COUNTRY, PUBLIC_FILTERS_DEFAULT_SORT, PUBLIC_GRID_AMOUNT } from '$env/static/public'

View File

@@ -1,6 +1,6 @@
import { error } from '@sveltejs/kit' import { error } from '@sveltejs/kit'
import type { PageServerLoad } from './$types' import type { PageServerLoad } from './$types'
import { fetchAPI } from '$utils/api' import { fetchAPI } from '$utils/api/data'
import { getProducts } from '$utils/functions/swell' import { getProducts } from '$utils/functions/swell'
export const load: PageServerLoad = async () => { export const load: PageServerLoad = async () => {

View File

@@ -1,6 +1,6 @@
import { error } from '@sveltejs/kit' import { error } from '@sveltejs/kit'
import type { PageServerLoad } from './$types' import type { PageServerLoad } from './$types'
import { fetchAPI } from '$utils/api' import { fetchAPI } from '$utils/api/data'
import { getProduct } from '$utils/functions/swell' import { getProduct } from '$utils/functions/swell'
import { getRandomItem } from '$utils/functions' import { getRandomItem } from '$utils/functions'

View File

@@ -1,6 +1,6 @@
import { error } from '@sveltejs/kit' import { error } from '@sveltejs/kit'
import type { PageServerLoad } from './$types' import type { PageServerLoad } from './$types'
import { fetchAPI } from '$utils/api' import { fetchAPI } from '$utils/api/data'
import { getProduct } from '$utils/functions/swell' import { getProduct } from '$utils/functions/swell'
export const load: PageServerLoad = async ({ params }) => { export const load: PageServerLoad = async ({ params }) => {

View File

@@ -1,6 +1,6 @@
import { error } from '@sveltejs/kit' import { error } from '@sveltejs/kit'
import type { PageServerLoad } from './$types' import type { PageServerLoad } from './$types'
import { fetchAPI } from '$utils/api' import { fetchAPI } from '$utils/api/data'
export const load: PageServerLoad = async () => { export const load: PageServerLoad = async () => {
try { try {

29
src/utils/api/data.ts Normal file
View File

@@ -0,0 +1,29 @@
import { API_TOKEN } from '$env/static/private'
import { PUBLIC_API_GRAPHQL_PATH } from '$env/static/public'
import { API_URL } from '.'
/**
* Fetch data from Directus API
*/
export const fetchAPI = async (query: string) => {
try {
const res = await fetch(`${API_URL}${PUBLIC_API_GRAPHQL_PATH}`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${API_TOKEN}`,
},
body: JSON.stringify({
query
})
})
if (res.ok) {
const data = await res.json()
return data
}
} catch (error) {
throw Error(error)
}
}

View File

@@ -1,36 +1,10 @@
import { env } from '$env/dynamic/private' import { env } from '$env/dynamic/private'
import { PUBLIC_API_URL_DEV, PUBLIC_API_URL_PROD, PUBLIC_API_GRAPHQL_PATH } from '$env/static/public' import { PUBLIC_API_URL_DEV, PUBLIC_API_URL_PROD } from '$env/static/public'
// Define API URL from environment // Define API URL from environment
export const API_URL = env.DEV ? PUBLIC_API_URL_DEV : PUBLIC_API_URL_PROD export const API_URL = env.DEV ? PUBLIC_API_URL_DEV : PUBLIC_API_URL_PROD
/**
* Fetch data from Directus API
*/
export const fetchAPI = async (query: string) => {
try {
const res = await fetch(`${API_URL}${PUBLIC_API_GRAPHQL_PATH}`, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${import.meta.env.VITE_API_TOKEN}`,
},
body: JSON.stringify({
query
})
})
if (res.ok) {
const data = await res.json()
return data
}
} catch (error) {
throw Error(error)
}
}
/** /**
* Get a Directus asset URL from parameters * Get a Directus asset URL from parameters
*/ */