File size: 2,746 Bytes
92189dd
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
/**
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
import {useCloseSessionBeforeUnloadMutation$variables} from '@/common/components/session/__generated__/useCloseSessionBeforeUnloadMutation.graphql';
import {sessionAtom} from '@/demo/atoms';
import useSettingsContext from '@/settings/useSettingsContext';
import {useAtomValue} from 'jotai';
import {useEffect, useMemo} from 'react';
import {ConcreteRequest, graphql} from 'relay-runtime';

/**
 * The useCloseSessionBeforeUnload is a dirty workaround to send close session
 * requests on window/tab close. Going through Relay does not send the request
 * even if the `keepalive` flag is set for the request. It does work when the
 * fetch is called directly with the close session mutation.
 *
 * Caveat: there is static typing, but there might be other caveats around this
 * quirky hack.
 */
export default function useCloseSessionBeforeUnload() {
  const session = useAtomValue(sessionAtom);
  const {settings} = useSettingsContext();

  const data = useMemo(() => {
    if (session == null) {
      return null;
    }

    const graphQLTaggedNode = graphql`
      mutation useCloseSessionBeforeUnloadMutation($input: CloseSessionInput!) {
        closeSession(input: $input) {
          success
        }
      }
    ` as ConcreteRequest;

    const variables: useCloseSessionBeforeUnloadMutation$variables = {
      input: {
        sessionId: session.id,
      },
    };

    const query = graphQLTaggedNode.params.text;
    if (query === null) {
      return null;
    }

    return {
      query,
      variables,
    };
  }, [session]);

  useEffect(() => {
    function onBeforeUpload() {
      if (data == null) {
        return;
      }

      fetch(`${settings.inferenceAPIEndpoint}/graphql`, {
        method: 'POST',
        credentials: 'include',
        headers: {
          'Content-Type': 'application/json',
        },
        keepalive: true,
        body: JSON.stringify(data),
      });
    }
    window.addEventListener('beforeunload', onBeforeUpload);
    return () => {
      window.removeEventListener('beforeunload', onBeforeUpload);
    };
  }, [data, session, settings.inferenceAPIEndpoint]);
}