Skip to content

Commit

Permalink
[1/4] Wrap useQuery/useLazyQuery + lint rule (#23860)
Browse files Browse the repository at this point in the history
## Summary & Motivation

Wrapping `useQuery` and `useLazyQuery` to automatically integrate with
our performance tracking so that we can get rid of
`useBlockTraceOnQueryResult`

## How I Tested These Changes

I ran yarn lint --fix and saw it auto-fix all of the @apollo/client
imports in ui-core. I will put these changes in the next PR to keep this
one small.

## Changelog [New | Bug | Docs]
NOCHANGELOG
  • Loading branch information
salazarm authored Aug 28, 2024
1 parent 06a72d0 commit 8afe956
Show file tree
Hide file tree
Showing 3 changed files with 108 additions and 0 deletions.
2 changes: 2 additions & 0 deletions js_modules/dagster-ui/packages/eslint-config/rules/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ const projectName = 'dagster-rules';
const rules = {
'missing-graphql-variables-type': require('./missing-graphql-variables-type').rule,
'no-oss-imports': require('./no-oss-imports'),
'no-apollo-client': require('./no-apollo-client'),
};

module.exports = {
Expand All @@ -14,6 +15,7 @@ module.exports = {
rules: {
[`${projectName}/missing-graphql-variables-type`]: 'error',
[`${projectName}/no-oss-imports`]: 'error',
[`${projectName}/no-apollo-client`]: 'error',
},
},
},
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
/* eslint-disable */

const fs = require('fs');
const path = require('path');

module.exports = {
meta: {
type: 'suggestion',
fixable: 'code',
messages: {
useWrappedApolloClient:
'Please use our wrapped apollo-client module which includes performance instrumentation.',
},
},
create(context) {
return {
ImportDeclaration(node) {
if (context.getFilename().endsWith('/apollo-client')) {
return;
}
if (node.source.value === '@apollo/client') {
context.report({
node,
messageId: 'useWrappedApolloClient',
fix(fixer) {
const currentFilePath = context.getFilename();
const relativeImportPath = findRelativeImportPath(
currentFilePath,
'src/apollo-client',
'index.tsx',
);

return fixer.replaceText(node.source, `'${relativeImportPath}'`);
},
});
}
},
};
},
};

function findRelativeImportPath(currentFilePath, targetDirName, targetFileName) {
let currentDir = path.dirname(currentFilePath);

while (currentDir !== path.parse(currentDir).root) {
const srcPath = path.join(currentDir, targetDirName);
const targetFilePath = path.join(srcPath, targetFileName);

if (fs.existsSync(targetFilePath)) {
return path.relative(path.dirname(currentFilePath), srcPath);
}

currentDir = path.dirname(currentDir);
}

// If we can't find the file then it means we're not in the ui-core package (we might be in cloud) so
// grab the import from @dagster-io/ui-core.

return '@dagster-io/ui-core/apollo-client';
}
46 changes: 46 additions & 0 deletions js_modules/dagster-ui/packages/ui-core/src/apollo-client/index.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,46 @@
/* eslint-disable no-restricted-imports */
import {
LazyQueryHookOptions,
OperationVariables,
QueryHookOptions,
useLazyQuery as useLazyQueryApollo,
useQuery as useQueryApollo,
} from '@apollo/client';

import {useBlockTraceOnQueryResult} from '../performance/TraceContext';

export * from '@apollo/client';

interface ExtendedQueryOptions<TData = any, TVariables extends OperationVariables = any>
extends QueryHookOptions<TData, TVariables> {
blocking?: boolean;
}

interface ExtendedLazyQueryOptions<TData = any, TVariables extends OperationVariables = any>
extends LazyQueryHookOptions<TData, TVariables> {
blocking?: boolean;
}

export function useQuery<TData = any, TVariables extends OperationVariables = any>(
query: any,
options?: ExtendedQueryOptions<TData, TVariables>,
) {
const {blocking = true, ...restOptions} = options || {};
const queryResult = useQueryApollo<TData, TVariables>(query, restOptions);
useBlockTraceOnQueryResult(queryResult, 'graphql', {
skip: !blocking,
});
return queryResult;
}

export function useLazyQuery<TData = any, TVariables extends OperationVariables = any>(
query: any,
options?: ExtendedLazyQueryOptions<TData, TVariables>,
) {
const {blocking = true, ...restOptions} = options || {};
const result = useLazyQueryApollo<TData, TVariables>(query, restOptions);
useBlockTraceOnQueryResult(result[1], 'graphql', {
skip: !blocking,
});
return result;
}

1 comment on commit 8afe956

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Deploy preview for dagit-core-storybook ready!

✅ Preview
https://dagit-core-storybook-dielqcbq7-elementl.vercel.app

Built with commit 8afe956.
This pull request is being automatically deployed with vercel-action

Please sign in to comment.