Skip to content

Commit

Permalink
FE: Fix refetching data on window focus (#380)
Browse files Browse the repository at this point in the history
Co-authored-by: Roman Zabaluev <[email protected]>
masonwoodford and Haarolean authored Sep 24, 2024
1 parent 1269803 commit 52451ec
Showing 7 changed files with 103 additions and 24 deletions.
12 changes: 8 additions & 4 deletions frontend/src/components/Schemas/Edit/Edit.tsx
Original file line number Diff line number Diff line change
@@ -4,6 +4,7 @@ import useAppParams from 'lib/hooks/useAppParams';
import PageLoader from 'components/common/PageLoader/PageLoader';
import { useNavigate } from 'react-router-dom';
import { useGetLatestSchema } from 'lib/hooks/api/schemas';
import { QUERY_REFETCH_LIMITED_OPTIONS } from 'lib/constants';

import Form from './Form';

@@ -14,10 +15,13 @@ const Edit: React.FC = () => {
isFetching,
isError,
data: schema,
} = useGetLatestSchema({
clusterName,
subject,
});
} = useGetLatestSchema(
{
clusterName,
subject,
},
QUERY_REFETCH_LIMITED_OPTIONS
);

useEffect(() => {
if (isError) {
15 changes: 12 additions & 3 deletions frontend/src/components/Topics/Topic/Edit/Edit.tsx
Original file line number Diff line number Diff line change
@@ -7,7 +7,10 @@ import { yupResolver } from '@hookform/resolvers/yup';
import { topicFormValidationSchema } from 'lib/yupExtended';
import useAppParams from 'lib/hooks/useAppParams';
import topicParamsTransformer from 'components/Topics/Topic/Edit/topicParamsTransformer';
import { MILLISECONDS_IN_WEEK } from 'lib/constants';
import {
MILLISECONDS_IN_WEEK,
QUERY_REFETCH_LIMITED_OPTIONS,
} from 'lib/constants';
import {
useTopicConfig,
useTopicDetails,
@@ -30,8 +33,14 @@ export const TOPIC_EDIT_FORM_DEFAULT_PROPS = {

const Edit: React.FC = () => {
const { clusterName, topicName } = useAppParams<RouteParamsClusterTopic>();
const { data: topic } = useTopicDetails({ clusterName, topicName });
const { data: topicConfig } = useTopicConfig({ clusterName, topicName });
const { data: topic } = useTopicDetails(
{ clusterName, topicName },
QUERY_REFETCH_LIMITED_OPTIONS
);
const { data: topicConfig } = useTopicConfig(
{ clusterName, topicName },
QUERY_REFETCH_LIMITED_OPTIONS
);
const updateTopic = useUpdateTopic({ clusterName, topicName });

const defaultValues = topicParamsTransformer(topic, topicConfig);
5 changes: 5 additions & 0 deletions frontend/src/lib/constants.ts
Original file line number Diff line number Diff line change
@@ -73,6 +73,11 @@ export const QUERY_REFETCH_OFF_OPTIONS = {
refetchIntervalInBackground: false,
};

export const QUERY_REFETCH_LIMITED_OPTIONS = {
refetchOnWindowFocus: false,
refetchIntervalInBackground: false,
};

// Cluster Form Constants
export const AUTH_OPTIONS = [
{ value: 'SASL/JAAS', label: 'SASL/JAAS' },
11 changes: 11 additions & 0 deletions frontend/src/lib/hooks/api/__tests__/schema.spec.ts
Original file line number Diff line number Diff line change
@@ -5,6 +5,7 @@ import {
} from 'lib/testHelpers';
import fetchMock from 'fetch-mock';
import * as hooks from 'lib/hooks/api/schemas';
import { QUERY_REFETCH_LIMITED_OPTIONS } from 'lib/constants';
import { act } from 'react-dom/test-utils';
import { renderHook, waitFor } from '@testing-library/react';
import { CompatibilityLevelCompatibilityEnum } from 'generated-sources';
@@ -47,6 +48,16 @@ describe('Schema hooks', () => {
);
await expectQueryWorks(mock, result);
});
it('returns the correct data with queryOptions', async () => {
const mock = fetchMock.getOnce(schemasAPILatestUrl, schemaVersion);
const { result } = renderQueryHook(() =>
hooks.useGetLatestSchema(
{ clusterName, subject },
QUERY_REFETCH_LIMITED_OPTIONS
)
);
await expectQueryWorks(mock, result);
});
});

describe('useGetSchemasVersions', () => {
41 changes: 31 additions & 10 deletions frontend/src/lib/hooks/api/__tests__/topics.spec.ts
Original file line number Diff line number Diff line change
@@ -9,6 +9,7 @@ import fetchMock from 'fetch-mock';
import { externalTopicPayload, topicConfigPayload } from 'lib/fixtures/topics';
import { CreateTopicMessage } from 'generated-sources';
import { TopicFormData, TopicFormDataRaw } from 'lib/interfaces/topic';
import { QUERY_REFETCH_LIMITED_OPTIONS } from 'lib/constants';

const clusterName = 'test-cluster';
const topicName = 'test-topic';
@@ -30,17 +31,37 @@ describe('Topics hooks', () => {
const { result } = renderQueryHook(() => hooks.useTopics({ clusterName }));
await expectQueryWorks(mock, result);
});
it('handles useTopicDetails', async () => {
const mock = fetchMock.getOnce(topicPath, externalTopicPayload);
const { result } = renderQueryHook(() =>
hooks.useTopicDetails(topicParams)
);
await expectQueryWorks(mock, result);
describe('useTopicDetails', () => {
it('handles useTopicDetails', async () => {
const mock = fetchMock.getOnce(topicPath, externalTopicPayload);
const { result } = renderQueryHook(() =>
hooks.useTopicDetails(topicParams)
);
await expectQueryWorks(mock, result);
});
it('handles useTopicDetails with queryOptions', async () => {
const mock = fetchMock.getOnce(topicPath, externalTopicPayload);
const { result } = renderQueryHook(() =>
hooks.useTopicDetails(topicParams, QUERY_REFETCH_LIMITED_OPTIONS)
);
await expectQueryWorks(mock, result);
});
});
it('handles useTopicConfig', async () => {
const mock = fetchMock.getOnce(`${topicPath}/config`, topicConfigPayload);
const { result } = renderQueryHook(() => hooks.useTopicConfig(topicParams));
await expectQueryWorks(mock, result);
describe('useTopicConfig', () => {
it('handles useTopicConfig', async () => {
const mock = fetchMock.getOnce(`${topicPath}/config`, topicConfigPayload);
const { result } = renderQueryHook(() =>
hooks.useTopicConfig(topicParams)
);
await expectQueryWorks(mock, result);
});
it('handles useTopicConfig with queryOptions', async () => {
const mock = fetchMock.getOnce(`${topicPath}/config`, topicConfigPayload);
const { result } = renderQueryHook(() =>
hooks.useTopicConfig(topicParams, QUERY_REFETCH_LIMITED_OPTIONS)
);
await expectQueryWorks(mock, result);
});
});
it('handles useTopicConsumerGroups', async () => {
const mock = fetchMock.getOnce(`${topicPath}/consumer-groups`, []);
13 changes: 11 additions & 2 deletions frontend/src/lib/hooks/api/schemas.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,9 @@
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import {
useMutation,
useQuery,
useQueryClient,
UseQueryOptions,
} from '@tanstack/react-query';
import {
GLOBAL_COMPATIBILITY_SCHEMAS_QUERY_KEY,
LATEST_SCHEMA_QUERY_KEY,
@@ -19,7 +24,10 @@ import {
import { schemasApiClient } from 'lib/api';
import { ClusterName } from 'lib/interfaces/cluster';

export function useGetLatestSchema(param: GetLatestSchemaRequest) {
export function useGetLatestSchema(
param: GetLatestSchemaRequest,
options?: UseQueryOptions<SchemaSubject>
) {
return useQuery<SchemaSubject>({
queryKey: [
SCHEMA_QUERY_KEY,
@@ -28,6 +36,7 @@ export function useGetLatestSchema(param: GetLatestSchemaRequest) {
param.subject,
],
queryFn: () => schemasApiClient.getLatestSchema(param),
...options,
});
}

30 changes: 25 additions & 5 deletions frontend/src/lib/hooks/api/topics.ts
Original file line number Diff line number Diff line change
@@ -4,14 +4,20 @@ import {
consumerGroupsApiClient,
messagesApiClient,
} from 'lib/api';
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
import {
useMutation,
useQuery,
useQueryClient,
UseQueryOptions,
} from '@tanstack/react-query';
import {
CreateTopicMessage,
GetTopicDetailsRequest,
GetTopicsRequest,
Topic,
TopicConfig,
TopicCreation,
TopicDetails,
TopicUpdate,
} from 'generated-sources';
import { showServerError, showSuccessAlert } from 'lib/errorHandling';
@@ -49,11 +55,25 @@ export function useTopics(props: GetTopicsRequest) {
{ keepPreviousData: true }
);
}
export function useTopicDetails(props: GetTopicDetailsRequest) {
return useQuery(topicKeys.details(props), () => api.getTopicDetails(props));
export function useTopicDetails(
props: GetTopicDetailsRequest,
queryOptions?: UseQueryOptions<TopicDetails>
) {
return useQuery<TopicDetails>(
topicKeys.details(props),
() => api.getTopicDetails(props),
queryOptions
);
}
export function useTopicConfig(props: GetTopicDetailsRequest) {
return useQuery(topicKeys.config(props), () => api.getTopicConfigs(props));
export function useTopicConfig(
props: GetTopicDetailsRequest,
queryOptions?: UseQueryOptions<TopicConfig[]>
) {
return useQuery<TopicConfig[]>(
topicKeys.config(props),
() => api.getTopicConfigs(props),
queryOptions
);
}
export function useTopicConsumerGroups(props: GetTopicDetailsRequest) {
return useQuery(topicKeys.consumerGroups(props), () =>

0 comments on commit 52451ec

Please sign in to comment.