15721249898

Committed 18 Jun 2025 12:51AM UTC coverage: 52.564% (+4.7%) from 47.872%

Build # 15721249898

Build Type

Pull #6091

github

Committed by

web-flow

Commit Message

Merge 1f8983303 into e6c7ae52e

Pull Request Pull Request #6091: feat: cacheable server-side rendering

Run Details

1789 of 3594 branches covered (49.78%)

Branch coverage included in aggregate %.

276 of 398 new or added lines in 38 files covered. (69.35%)

7 existing lines in 4 files now uncovered.

2629 of 4811 relevant lines covered (54.65%)

280.98 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

79.69

/src/plugins/apollo-plugin.js

import checkInjections from '#src/util/injectionCheck';
import logReadQueryError from '#src/util/logReadQueryError';
import { isContentfulQuery } from '#src/util/contentful/isContentfulQuery';

const injections = ['apollo', 'cookieStore'];

// install method for plugin
export default app => {
        // export default {
        app.mixin({
                created() {
                        if (this.$options.apollo) {
                                checkInjections(this, injections);

                                // Get common variables for all queries
                                const basketId = this.cookieStore?.get('kvbskt') ?? null;
                                const isContentfulPreview = this.$route?.query?.preview === 'true';

                                // $options.apollo is either a single object or an array of objects
                                const operations = Array.isArray(this.$options.apollo) ? this.$options.apollo : [this.$options.apollo];

                                // Load data for each query in the component
                                for (let i = 0; i < operations.length; i += 1) {
                                        const operation = operations[i];
                                        const {
                                                query,
                                                preFetch,
                                                shouldPreFetch = true,
                                                preFetchVariables = () => { },
                                                variables = () => { },
                                                result = () => { },
                                        } = operation;

                                        if (query) {
                                                // Check if the query was prefetched
                                                let preFetched = preFetch && shouldPreFetch;
                                                if (typeof shouldPreFetch === 'function') {
                                                        preFetched = preFetch && shouldPreFetch(operation, {
                                                                cookieStore: this.cookieStore,
                                                                device: this.device,
                                                                kvAuth0: this.kvAuth0,
                                                                renderConfig: this.$renderConfig,
                                                                route: this.$route,
                                                        });
                                                }

                                                // if the query was prefetched, read the data from the cache
                                                if (preFetched) {
                                                        try {
                                                                const data = this.apollo.readQuery({
                                                                        query,
                                                                        variables: {
                                                                                ...(basketId && { basketId }),
                                                                                ...preFetchVariables({
                                                                                        cookieStore: this.cookieStore,
                                                                                        route: this.$route,
                                                                                        client: this.apollo,
                                                                                }),
                                                                                /* Adds `preview: true` variable if the query is a contentful query
                                                                                and the preview cookie value exists */
                                                                                ...(isContentfulQuery(query) && isContentfulPreview && { preview: true })
                                                                        }
                                                                });

                                                                if (data !== null) {
                                                                        result.call(this, { data });
                                                                }
                                                        } catch (e) {
                                                                // if there's an error, skip reading from the cache and just wait for the watch query
                                                                logReadQueryError(e, `ApolloMixin ${query?.definitions?.[0]?.name?.value}`);
                                                        }
                                                }

                                                if (typeof window !== 'undefined') {
                                                        // Setup an observer to watch for changes to the query result
                                                        const observer = this.apollo.watchQuery({
                                                                query,
                                                                variables: {
                                                                        ...(basketId && { basketId }),
                                                                        ...variables.call(this),
                                                                        ...(isContentfulQuery(query) && isContentfulPreview && { preview: true })
                                                                }
                                                        });

                                                        // Use Vue's $watch to reactively update the query variables when the component data changes
                                                        // This will cause a new query result to be fetched if it is not available in the cache
                                                        this.$watch(variables, vars => observer.setVariables({
                                                                ...(basketId && { basketId }),
                                                                ...vars,
                                                                ...(isContentfulQuery(query) && isContentfulPreview && { preview: true })
                                                        }), { deep: true });

                                                        // Subscribe to the observer to see each result
                                                        observer.subscribe({
                                                                next: apolloResult => result.call(this, apolloResult)
                                                        });
                                                }
                                        }
                                }
                        }
                }
        });
};

1	import checkInjections from '#src/util/injectionCheck';
2	import logReadQueryError from '#src/util/logReadQueryError';
3	import { isContentfulQuery } from '#src/util/contentful/isContentfulQuery';
4
5	const injections = ['apollo', 'cookieStore'];	1✔
6
7	// install method for plugin
8	export default app => {
9	// export default {
10	app.mixin({	8✔
11	created() {
12	if (this.$options.apollo) {	7✔
13	checkInjections(this, injections);	6✔
14
15	// Get common variables for all queries
16	const basketId = this.cookieStore?.get('kvbskt') ?? null;	5✔
17	const isContentfulPreview = this.$route?.query?.preview === 'true';	5✔
18
19	// $options.apollo is either a single object or an array of objects
20	const operations = Array.isArray(this.$options.apollo) ? this.$options.apollo : [this.$options.apollo];	5✔
21
22	// Load data for each query in the component
23	for (let i = 0; i < operations.length; i += 1) {	5✔
24	const operation = operations[i];	6✔
25	const {
26	query,
27	preFetch,
28	shouldPreFetch = true,	5✔
29	preFetchVariables = () => { },	6✔
30	variables = () => { },	4✔
31	result = () => { },	×
32	} = operation;	6✔
33
34	if (query) {	6!
35	// Check if the query was prefetched
36	let preFetched = preFetch && shouldPreFetch;	6✔
37	if (typeof shouldPreFetch === 'function') {	6✔
38	preFetched = preFetch && shouldPreFetch(operation, {	1✔
39	cookieStore: this.cookieStore,
40	device: this.device,
41	kvAuth0: this.kvAuth0,
42	renderConfig: this.$renderConfig,
43	route: this.$route,
44	});
45	}
46
47	// if the query was prefetched, read the data from the cache
48	if (preFetched) {	6✔
49	try {	3✔
50	const data = this.apollo.readQuery({	3✔
51	query,
52	variables: {
53	...(basketId && { basketId }),	3!
54	...preFetchVariables({
55	cookieStore: this.cookieStore,
56	route: this.$route,
57	client: this.apollo,
58	}),
59	/* Adds `preview: true` variable if the query is a contentful query
60	and the preview cookie value exists */
61	...(isContentfulQuery(query) && isContentfulPreview && { preview: true })	3!
62	}
63	});
64
65	if (data !== null) {	3✔
66	result.call(this, { data });	2✔
67	}
68	} catch (e) {
69	// if there's an error, skip reading from the cache and just wait for the watch query
NEW 70	logReadQueryError(e, `ApolloMixin ${query?.definitions?.[0]?.name?.value}`);	×
71	}
72	}
73
74	if (typeof window !== 'undefined') {	6!
75	// Setup an observer to watch for changes to the query result
76	const observer = this.apollo.watchQuery({	6✔
77	query,
78	variables: {
79	...(basketId && { basketId }),	6!
80	...variables.call(this),
81	...(isContentfulQuery(query) && isContentfulPreview && { preview: true })	6!
82	}
83	});
84
85	// Use Vue's $watch to reactively update the query variables when the component data changes
86	// This will cause a new query result to be fetched if it is not available in the cache
87	this.$watch(variables, vars => observer.setVariables({	6✔
88	...(basketId && { basketId }),	3!
89	...vars,
90	...(isContentfulQuery(query) && isContentfulPreview && { preview: true })	3!
91	}), { deep: true });
92
93	// Subscribe to the observer to see each result
94	observer.subscribe({	6✔
95	next: apolloResult => result.call(this, apolloResult)	3✔
96	});
97	}
98	}
99	}
100	}
101	}
102	});
103	};

kiva / ui / 15721249898

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous