s3browser-frontend/src/index.tsx

import React from "react"
import ReactDOM from "react-dom"
import "./index.scss"
import App from "./App"
import { ApolloClient, ApolloProvider, InMemoryCache } from "@apollo/client"
import "react-contexify/dist/ReactContexify.css"
import ObjID from "./types/ObjID"

const client = new ApolloClient({
	uri: "/api/graphql",
	cache: new InMemoryCache({
		typePolicies:{
			File:{
				fields:{
					id:{
						merge(_,incomming){
							// HACK: i use the merge function to change the id from a string to ObjID object.
							// afaik apollo does not yet support custom scalar types.
							if (!incomming){
								return incomming
							}else if (incomming instanceof ObjID){
								return incomming
							}else{
								return ObjID.fromString(incomming as string)
							}
						}
					}
				}
			},
			Directory:{
				fields:{
					id:{
						merge(_,incomming){
							if (!incomming){
								return incomming
							}else if (incomming instanceof ObjID){
								return incomming
							}else{
								return ObjID.fromString(incomming as string)
							}
						}
					}
				}
			},
			Query: {
				fields: {
					files: {
						merge(existing, incoming){
							return incoming
						}
					},
					directorys:{
						merge(existing, incoming){
							return incoming
						}
					}
				}
			}
		}
	})
})

// Disable drag and drop behaviour on document
function disable(event: DragEvent) {
	event.preventDefault()
	event.stopPropagation()
}
document.addEventListener("dragenter",disable)
document.addEventListener("dragleave",disable)
document.addEventListener("dragover",disable)
document.addEventListener("drop",disable)

ReactDOM.render(
	<React.StrictMode>
		<ApolloProvider client={client}>
			<App />
		</ApolloProvider>
	</React.StrictMode>,
	document.getElementById("root")
)