Differential D8805 Diff 41345 js_modules/dagit/packages/core/src/app/AppProvider.tsx

Changeset View

Standalone View

js_modules/dagit/packages/core/src/app/AppProvider.tsx

Show First 20 Lines • Show All 72 Lines • ▼ Show 20 Lines	const GlobalStyle = createGlobalStyle`
code, pre {		code, pre {
font-family: ${FontFamily.monospace};		font-family: ${FontFamily.monospace};
}		}
`;		`;

interface Props {		interface Props {
appCache: InMemoryCache;		appCache: InMemoryCache;
config: {		config: {
graphqlURI: string;
basePath?: string;		basePath?: string;
		origin: string;
permissions: PermissionsFromJSON;		permissions: PermissionsFromJSON;
subscriptionParams?: {[key: string]: string};		subscriptionParams?: {[key: string]: string};
};		};
}		}

export const AppProvider: React.FC<Props> = (props) => {		export const AppProvider: React.FC<Props> = (props) => {
const {appCache, config} = props;		const {appCache, config} = props;
const {basePath = '', permissions, subscriptionParams = {}, graphqlURI} = config;		const {basePath = '', origin, permissions, subscriptionParams = {}} = config;

const httpGraphqlURI = graphqlURI.replace('wss://', 'https://').replace('ws://', 'http://');		const graphqlPath = `${basePath}/graphql`;
		const rootServerURI = `${origin}${basePath}`;
const httpURI = httpGraphqlURI \|\| `${document.location.origin}${basePath}/graphql`;		const websocketURI = `${rootServerURI.replace(/^http/, 'ws')}/graphql`;

const websocketURI = httpURI.replace('https://', 'wss://').replace('http://', 'ws://');

// The address to the dagit server (eg: http://localhost:5000) based
// on our current "GRAPHQL_URI" env var. Note there is no trailing slash.
const rootServerURI = httpURI.replace('/graphql', '');

const websocketClient = React.useMemo(() => {		const websocketClient = React.useMemo(() => {
return new SubscriptionClient(websocketURI, {		return new SubscriptionClient(websocketURI, {
reconnect: true,		reconnect: true,
connectionParams: subscriptionParams,		connectionParams: subscriptionParams,
});		});
}, [subscriptionParams, websocketURI]);		}, [subscriptionParams, websocketURI]);

const apolloClient = React.useMemo(() => {		const apolloClient = React.useMemo(() => {
const logLink = new ApolloLink((operation, forward) =>		const logLink = new ApolloLink((operation, forward) =>
forward(operation).map((data) => {		forward(operation).map((data) => {
const time = performance.now() - operation.getContext().start;		const time = performance.now() - operation.getContext().start;
debugLog(`${operation.operationName} took ${formatElapsedTime(time)}`, {operation, data});		debugLog(`${operation.operationName} took ${formatElapsedTime(time)}`, {operation, data});
return data;		return data;
}),		}),
);		);

const timeStartLink = new ApolloLink((operation, forward) => {		const timeStartLink = new ApolloLink((operation, forward) => {
operation.setContext({start: performance.now()});		operation.setContext({start: performance.now()});
return forward(operation);		return forward(operation);
});		});

const httpLink = new HttpLink({uri: httpURI});		const httpLink = new HttpLink({uri: graphqlPath});
const websocketLink = new WebSocketLink(websocketClient);		const websocketLink = new WebSocketLink(websocketClient);

// subscriptions should use the websocket link; queries & mutations should use HTTP		// subscriptions should use the websocket link; queries & mutations should use HTTP
const splitLink = split(		const splitLink = split(
({query}) => {		({query}) => {
const definition = getMainDefinition(query);		const definition = getMainDefinition(query);
return definition.kind === 'OperationDefinition' && definition.operation === 'subscription';		return definition.kind === 'OperationDefinition' && definition.operation === 'subscription';
},		},
websocketLink,		websocketLink,
httpLink,		httpLink,
);		);

return new ApolloClient({		return new ApolloClient({
cache: appCache,		cache: appCache,
link: ApolloLink.from([logLink, AppErrorLink(), timeStartLink, splitLink]),		link: ApolloLink.from([logLink, AppErrorLink(), timeStartLink, splitLink]),
});		});
}, [appCache, httpURI, websocketClient]);		}, [appCache, graphqlPath, websocketClient]);

const appContextValue = React.useMemo(		const appContextValue = React.useMemo(
() => ({		() => ({
basePath,		basePath,
permissions,		permissions,
rootServerURI,		rootServerURI,
websocketURI,		websocketURI,
}),		}),
Show All 24 Lines