diff --git a/examples/data-fetching/data-fetching-project/data-fetching-app/components/modules/Fetcher/fields.tsx b/examples/data-fetching/data-fetching-project/data-fetching-app/components/modules/Fetcher/fields.tsx index cf64139..28d6f0a 100644 --- a/examples/data-fetching/data-fetching-project/data-fetching-app/components/modules/Fetcher/fields.tsx +++ b/examples/data-fetching/data-fetching-project/data-fetching-app/components/modules/Fetcher/fields.tsx @@ -47,7 +47,7 @@ export const fields = ( => { - const fieldValues = moduleProps.fieldValues as FieldValues; - const { url } = extraDeps; - - const dataPromises = []; - const start = Date.now(); - - const dataFetchingLib: string = fieldValues.dataFetchingLib; - const fetchUrl = urlToFetch(fieldValues); - - if (dataFetchingLib && !fieldValues.useCustomFetchUrl) { - if (dataFetchingLib === 'axios') { - dataPromises.push( - axios.get(fetchUrl).then((response: any) => { - return { - json: response.data, - duration: Date.now() - start, - }; - }), - ); - } +export function getDataPromise(fieldValues: FieldValues) { + const { dataFetchingLib, useCustomFetchUrl } = fieldValues; + const fetchUrl = urlToFetch(fieldValues); + const start = Date.now(); + + if (dataFetchingLib && !useCustomFetchUrl) { + if (dataFetchingLib === 'axios') { + return axios.get(fetchUrl).then((response: any) => { + return { + json: response.data, + duration: Date.now() - start, + }; + }); + } - if (dataFetchingLib === 'graphql-request') { - dataPromises.push( - graphqlRequest(POKEMON_GRAPHQL_SCHEMA_URL, pokemonQuery, { - pokemonName: fieldValues.pokemon, - }).then((value: any) => { - return { - json: value, - duration: Date.now() - start, - }; - }), - ); - } + if (dataFetchingLib === 'graphql-request') { + return graphqlRequest(POKEMON_GRAPHQL_SCHEMA_URL, pokemonQuery, { + pokemonName: fieldValues.pokemon, + }).then((value: any) => { + return { + json: value, + duration: Date.now() - start, + }; + }); + } - if (dataFetchingLib === 'fetch') { - if (!fetch) { - throw new Error( - `Fetch API is not defined, node version = ${process.versions.node}`, - ); - } + if (dataFetchingLib === 'nodeFetchCache') { + return nodeFetchCache(fetchUrl).then(async (response) => { + return { + json: await response.json(), + duration: Date.now() - start, + }; + }); + } - dataPromises.push( - fetch(fetchUrl).then(async (response) => { - return { - json: await response.json(), - duration: Date.now() - start, - }; - }), + if (dataFetchingLib === 'fetch') { + logInfo('here'); + if (!fetch) { + throw new Error( + `Fetch API is not defined, node version = ${process.versions.node}`, ); } - if (dataFetchingLib === 'nodeFetchCache') { - dataPromises.push( - nodeFetchCache(fetchUrl).then(async (response) => { - return { - json: await response.json(), - duration: Date.now() - start, - }; - }), - ); - } - } else { - dataPromises.push( - axios.get(fetchUrl).then((response: any) => { - return { - json: response.data, - duration: Date.now() - start, - }; - }), + return fetch(fetchUrl).then(async (response) => { + return { + json: await response.json(), + duration: Date.now() - start, + }; + }); + } + } else { + if (!fetch) { + throw new Error( + `Fetch API is not defined, node version = ${process.versions.node}`, ); } - logInfo('before data fetch'); + return fetch(fetchUrl).then(async (response) => { + return { + json: await response.json(), + duration: Date.now() - start, + }; + }); + } +} - const jsonData = (await Promise.allSettled(dataPromises)).map( - (result: any) => { - if (result.status === 'fulfilled') { - logInfo( - 'Fetch success', - Object.keys(result.value.json).join(', '), - `duration = ${result.value.duration}`, - ); - } else { - logError('Fetch failure'); - } +export const getServerSideProps = withUrlAndQuery( + async ( + moduleProps: CustomModulePropsWithoutSSP, + extraDeps, + ): Promise => { + const fieldValues = moduleProps.fieldValues as FieldValues; + const { url } = extraDeps; - return result.status === 'fulfilled' - ? result.value - : { - status: result.status, - reason: result.reason, - }; - }, - ); - logInfo('after data fetch'); + logInfo('before data fetch'); + const dataPromise = getDataPromise(fieldValues) as Promise<{ + json: JSON; + duration: number; + }>; - const results = - dataFetchingLib && !fieldValues.useCustomFetchUrl - ? [dataFetchingLib, jsonData[0]] - : jsonData[0]; + const results = await settlePromise(dataPromise); + logInfo('after data fetch'); return { serverSideProps: { results, urlSearchParams: url.search }, @@ -188,10 +163,9 @@ export function Component({ }; }) { const { results } = serverSideProps; - const { useCustomFetchUrl, dataFetchingLib } = fieldValues; - const responseData = useCustomFetchUrl ? results : results[1]; - const { json, duration } = responseData; - const lib = useCustomFetchUrl ? FALLBACK_FETCH_LIBRARY : dataFetchingLib; + const { json, duration } = results.value; + const { useCustomFetchUrl, dataFetchingLib, fetchUrl } = fieldValues; + const lib = useCustomFetchUrl ? 'fetch' : dataFetchingLib; return (
@@ -203,17 +177,16 @@ export function Component({

- ...via {fieldValues.fetchUrl}{' '} - (duration = {results.duration}ms) + ...via {fetchUrl} (duration = {duration}ms)


-
{JSON.stringify(results.json, null, 2)}
+
{JSON.stringify(results.value, null, 2)}
) : ( - results && ( + json && ( , +) { + return promise + .then((value: { json: JSON; duration: number }) => { + logInfo({ status: 'fulfilled' }); + return { status: 'fulfilled', value }; + }) + .catch((reason) => logError({ status: 'rejected', reason })); +}