This query usually works, and if this error happens, I can just open the URL in a new tab and it works fine.
500
Cannot read property 'muxVideo' of null
TypeError: Cannot read property 'muxVideo' of null
at [slug].svelte:98:63
at Object.$$render (/Users/ben/dev/my-project/node_modules/svelte/internal/index.js:1745:22)
at Object.default (root.svelte:50:47)
at Object.default (/src/routes/__layout.svelte:187:36)
at eval (/node_modules/@sveltestack/svelte-query/svelte/queryClientProvider/QueryClientProvider.svelte:38:41)
at Object.$$render (/Users/ben/dev/my-project/node_modules/svelte/internal/index.js:1745:22)
at __layout.svelte:106:29
at Object.$$render (/Users/ben/dev/my-project/node_modules/svelte/internal/index.js:1745:22)
at root.svelte:38:45
at $$render (/Users/ben/dev/my-project/node_modules/svelte/internal/index.js:1745:22)
[watch:svelte] {
[watch:svelte] status: 'success',
[watch:svelte] isLoading: false,
[watch:svelte] isSuccess: true,
[watch:svelte] isError: false,
[watch:svelte] isIdle: false,
[watch:svelte] data: { getTranscript: null },
[watch:svelte] dataUpdatedAt: 1647253771588,
[watch:svelte] error: null,
[watch:svelte] errorUpdatedAt: 0,
[watch:svelte] failureCount: 0,
[watch:svelte] isFetched: true,
[watch:svelte] isFetchedAfterMount: false,
[watch:svelte] isFetching: false,
[watch:svelte] isRefetching: false,
[watch:svelte] isLoadingError: false,
[watch:svelte] isPlaceholderData: false,
[watch:svelte] isPreviousData: false,
[watch:svelte] isRefetchError: false,
[watch:svelte] isStale: false,
[watch:svelte] refetch: [Function: bound refetch],
[watch:svelte] remove: [Function: bound remove]
[watch:svelte] }
<script context="module">
/**
* @type {import('@sveltejs/kit').Load}
*/
export async function load({ params, fetch, session, context }) {
return {
props: {
slug: `${params.slug}`
}
};
}
</script>
<script>
// deps
import '$lib/polyfills';
import { setContext, getContext } from 'svelte';
import { writable } from 'svelte/store';
import { useQuery, useInfiniteQuery } from '@sveltestack/svelte-query';
// queries
import { TranscriptBySlugDocument } from '$lib/graphql/queries/types/transcripts';
export let slug;
const graphQLClient = getContext('graphql-client');
let params = writable({ slug });
setContext('params', params);
$: $params.slug = slug;
const getTranscript = async () => {
return await $graphQLClient.request(TranscriptBySlugDocument, { slug: $params.slug });
};
const transcriptQuery = useQuery('transcriptQuery', getTranscript, {
enabled: false
});
$: if ($graphQLClient?.fetchOptions?.headers?.['X-Auth-Token'] !== undefined) {
transcriptQuery.setEnabled(true);
}
setContext('transcriptQuery', transcriptQuery);
$: console.log($transcriptQuery)
</script>
<div class="grid grid-cols-12 gap-3 leading-6 text-gray-700">
<div class="col-span-4 p-3 leading-6 text-gray-700">
{#if $transcriptQuery.isLoading || $transcriptQuery.isIdle}
<span>Loading..</span>
{:else if $transcriptQuery.isSuccess}
<div class="video-container" style="min-height: {videoContainerHeight}">
<TranscriptVideo
videoId={$transcriptQuery.data.getTranscript.muxVideo.playbackId}
playerType='hls' />
</div>
{:else}
<span>Error loading video</span>
{/if}
</div>
</div><script>
const graphQLClientStore = writable(graphQLClient);
fetchToken();
setContext('graphql-client', graphQLClientStore);
async function fetchToken() {
// XXX: Temp workaround due to:
// https://github.com/sveltejs/kit/issues/1198
//
// Also see:
// https://github.com/sveltejs/kit/issues/696
// https://github.com/sveltejs/kit/issues/672
//
// Until this is resolved, useQueryClient cannot
// be used because we need to reactively update
// the client with the token after the app has
// initialised. useQueryClient doesn't allow this
const userAuth = await fetch('/api/auth/user');
const tokens = await userAuth.json();
const jwt = tokens.jwt;
$graphQLClientStore.setFetchOptions({
headers: {
'X-Auth-Token': jwt
}
});
// Trigger reactive update
$graphQLClientStore = $graphQLClientStore;
}
onMount(async () => {
fetchToken();
});
</script>
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
