Skip to content

Commit

Permalink
Merge pull request #730 from hyperweb-io/react-query-cache-fix
Browse files Browse the repository at this point in the history 
React query cache fix
  • Loading branch information
@Zetazzz
Zetazzz authored Feb 7, 2025
2 parents 0649f73 + a5fb141 commit 38bb4ec
Show file tree
Hide file tree
Showing 8 changed files with 174 additions and 82 deletions.
16 changes: 9 additions & 7 deletions __fixtures__/v-next/outputhelperfunc/helper-func-types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,6 @@ import { BinaryReader, BinaryWriter } from "./binary";
import { getRpcClient } from "./extern";
import { isRpc, Rpc } from "./helpers";
import { TelescopeGeneratedCodec } from "./types";
import { GlobalDecoderRegistry } from "./registry";

export interface QueryBuilderOptions<TReq, TRes> {
encode: (request: TReq, writer?: BinaryWriter) => BinaryWriter
Expand Down Expand Up @@ -103,12 +102,15 @@ export function buildTx<TMsg>(opts: TxBuilderOptions) {
client.addEncoders(opts.encoders ?? []);
client.addConverters(opts.converters ?? []);

const data = [
{
typeUrl: opts.typeUrl,
value: message,
},
];
const data = Array.isArray(message)
? message.map(msg => ({
typeUrl: opts.typeUrl,
value: msg,
}))
: [{
typeUrl: opts.typeUrl,
value: message,
}];
return client.signAndBroadcast!(signerAddress, data, fee, memo);
};
}
Expand Down
48 changes: 34 additions & 14 deletions __fixtures__/v-next/outputhelperfunc/react-query.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -127,6 +127,14 @@ export interface UseQueryBuilderOptions<TReq, TRes> {
queryKeyPrefix: string,
}

const getRpcClientFromCache = (
queryClient: ReturnType<typeof useQueryClient>,
key: string,
rpcEndpoint?: string | HttpEndpoint
): Rpc | undefined => {
const queryKey = rpcEndpoint ? [key, rpcEndpoint] : [key];
return queryClient.getQueryData<Rpc>(queryKey);
};

export function buildUseQuery<TReq, TRes>(opts: UseQueryBuilderOptions<TReq, TRes>) {
return <TData = TRes>({
Expand All @@ -143,16 +151,17 @@ export function buildUseQuery<TReq, TRes>(opts: UseQueryBuilderOptions<TReq, TRe

if(isRpc(clientResolver)) {
rpcResolver = clientResolver;
} else if(isCacheResolver(clientResolver)) {
const key = clientResolver.clientQueryKey || DEFAULT_RPC_CLIENT_QUERY_KEY;
const queryKey = clientResolver.rpcEndpoint ? [key, clientResolver.rpcEndpoint] : [key];
rpcResolver = queryClient.getQueryData<Rpc>(queryKey);

if(!rpcResolver && clientResolver.rpcEndpoint) {
rpcResolver = clientResolver.rpcEndpoint;
}
} else {
rpcResolver = clientResolver;
const key = isCacheResolver(clientResolver)
? clientResolver.clientQueryKey || DEFAULT_RPC_CLIENT_QUERY_KEY
: DEFAULT_RPC_CLIENT_QUERY_KEY;
const endpoint = isCacheResolver(clientResolver) ? clientResolver.rpcEndpoint : undefined;

const cachedClient = getRpcClientFromCache(queryClient, key, endpoint);
// For CacheResolver with endpoint, use endpoint as fallback if no cached client
rpcResolver = cachedClient ||
(isCacheResolver(clientResolver) && clientResolver.rpcEndpoint ? clientResolver.rpcEndpoint :
(!isCacheResolver(clientResolver) ? clientResolver : undefined));
}

const queryFn = opts.builderQueryFn(rpcResolver);
Expand Down Expand Up @@ -181,6 +190,14 @@ export interface UseMutationBuilderOptions<TMsg> {
) => Promise<DeliverTxResponse>,
}

const getSigningClientFromCache = (
queryClient: ReturnType<typeof useQueryClient>,
key: string,
rpcEndpoint?: string | HttpEndpoint
): ISigningClient | undefined => {
const queryKey = rpcEndpoint ? [key, rpcEndpoint] : [key];
return queryClient.getQueryData<ISigningClient>(queryKey);
};

export function buildUseMutation<TMsg, TError>(opts: UseMutationBuilderOptions<TMsg>) {
return ({
Expand All @@ -195,12 +212,15 @@ export function buildUseMutation<TMsg, TError>(opts: UseMutationBuilderOptions<T

if(isISigningClient(clientResolver)) {
signingClientResolver = clientResolver;
} else if(isCacheResolver(clientResolver)) {
const key = clientResolver.clientQueryKey || DEFAULT_SIGNING_CLIENT_QUERY_KEY;
const queryKey = clientResolver.rpcEndpoint ? [key, clientResolver.rpcEndpoint] : [key];
signingClientResolver = queryClient.getQueryData<ISigningClient>(queryKey);
} else {
clientResolver = clientResolver;
// For both CacheResolver and other cases, try to get from cache first
const key = isCacheResolver(clientResolver)
? clientResolver.clientQueryKey || DEFAULT_SIGNING_CLIENT_QUERY_KEY
: DEFAULT_SIGNING_CLIENT_QUERY_KEY;
const endpoint = isCacheResolver(clientResolver) ? clientResolver.rpcEndpoint : undefined;

const cachedClient = getSigningClientFromCache(queryClient, key, endpoint);
signingClientResolver = cachedClient || (!isCacheResolver(clientResolver) ? clientResolver : undefined);
}

const mutationFn = opts.builderMutationFn(signingClientResolver);
Expand Down
15 changes: 9 additions & 6 deletions __fixtures__/v-next/outputicjs/helper-func-types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,12 +95,15 @@ export function buildTx<TMsg>(opts: TxBuilderOptions) {
client.addEncoders(opts.encoders ?? []);
client.addConverters(opts.converters ?? []);

const data = [
{
typeUrl: opts.typeUrl,
value: message,
},
];
const data = Array.isArray(message)
? message.map(msg => ({
typeUrl: opts.typeUrl,
value: msg,
}))
: [{
typeUrl: opts.typeUrl,
value: message,
}];
return client.signAndBroadcast!(signerAddress, data, fee, memo);
};
}
Expand Down
49 changes: 35 additions & 14 deletions __fixtures__/v-next/outputicjs/react-query.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,15 @@ export const useRpcClient = <TData = ProtobufRpcClient>({
}, options);
};

const getRpcClientFromCache = (
queryClient: ReturnType<typeof useQueryClient>,
key: string,
rpcEndpoint?: string | HttpEndpoint
): Rpc | undefined => {
const queryKey = rpcEndpoint ? [key, rpcEndpoint] : [key];
return queryClient.getQueryData<Rpc>(queryKey);
};

export interface UseQueryBuilderOptions<TReq, TRes> {
builderQueryFn: (clientResolver?: RpcResolver) => (request: TReq) => Promise<TRes>,
queryKeyPrefix: string,
Expand All @@ -115,16 +124,17 @@ export function buildUseQuery<TReq, TRes>(opts: UseQueryBuilderOptions<TReq, TRe

if(isRpc(clientResolver)) {
rpcResolver = clientResolver;
} else if(isCacheResolver(clientResolver)) {
const key = clientResolver.clientQueryKey || DEFAULT_RPC_CLIENT_QUERY_KEY;
const queryKey = clientResolver.rpcEndpoint ? [key, clientResolver.rpcEndpoint] : [key];
rpcResolver = queryClient.getQueryData<Rpc>(queryKey);

if(!rpcResolver && clientResolver.rpcEndpoint) {
rpcResolver = clientResolver.rpcEndpoint;
}
} else {
rpcResolver = clientResolver;
const key = isCacheResolver(clientResolver)
? clientResolver.clientQueryKey || DEFAULT_RPC_CLIENT_QUERY_KEY
: DEFAULT_RPC_CLIENT_QUERY_KEY;
const endpoint = isCacheResolver(clientResolver) ? clientResolver.rpcEndpoint : undefined;

const cachedClient = getRpcClientFromCache(queryClient, key, endpoint);
// For CacheResolver with endpoint, use endpoint as fallback if no cached client
rpcResolver = cachedClient ||
(isCacheResolver(clientResolver) && clientResolver.rpcEndpoint ? clientResolver.rpcEndpoint :
(!isCacheResolver(clientResolver) ? clientResolver : undefined));
}

const queryFn = opts.builderQueryFn(rpcResolver);
Expand Down Expand Up @@ -153,6 +163,14 @@ export interface UseMutationBuilderOptions<TMsg> {
) => Promise<DeliverTxResponse>,
}

const getSigningClientFromCache = (
queryClient: ReturnType<typeof useQueryClient>,
key: string,
rpcEndpoint?: string | HttpEndpoint
): ISigningClient | undefined => {
const queryKey = rpcEndpoint ? [key, rpcEndpoint] : [key];
return queryClient.getQueryData<ISigningClient>(queryKey);
};

export function buildUseMutation<TMsg, TError>(opts: UseMutationBuilderOptions<TMsg>) {
return ({
Expand All @@ -167,12 +185,15 @@ export function buildUseMutation<TMsg, TError>(opts: UseMutationBuilderOptions<T

if(isISigningClient(clientResolver)) {
signingClientResolver = clientResolver;
} else if(isCacheResolver(clientResolver)) {
const key = clientResolver.clientQueryKey || DEFAULT_SIGNING_CLIENT_QUERY_KEY;
const queryKey = clientResolver.rpcEndpoint ? [key, clientResolver.rpcEndpoint] : [key];
signingClientResolver = queryClient.getQueryData<ISigningClient>(queryKey);
} else {
clientResolver = clientResolver;
// For both CacheResolver and other cases, try to get from cache first
const key = isCacheResolver(clientResolver)
? clientResolver.clientQueryKey || DEFAULT_SIGNING_CLIENT_QUERY_KEY
: DEFAULT_SIGNING_CLIENT_QUERY_KEY;
const endpoint = isCacheResolver(clientResolver) ? clientResolver.rpcEndpoint : undefined;

const cachedClient = getSigningClientFromCache(queryClient, key, endpoint);
signingClientResolver = cachedClient || (!isCacheResolver(clientResolver) ? clientResolver : undefined);
}

const mutationFn = opts.builderMutationFn(signingClientResolver);
Expand Down
16 changes: 9 additions & 7 deletions packages/telescope/src/helpers/helper-func-types-interface.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ import { BinaryReader, BinaryWriter } from "./binary${options.restoreImportExten
import { getRpcClient } from "./extern${options.restoreImportExtension ?? ""}";
import { isRpc, Rpc } from "./helpers${options.restoreImportExtension ?? ""}";
import { TelescopeGeneratedCodec } from "./types";
import { GlobalDecoderRegistry } from "./registry";
export interface QueryBuilderOptions<TReq, TRes> {
encode: (request: TReq, writer?: BinaryWriter) => BinaryWriter
Expand Down Expand Up @@ -100,12 +99,15 @@ export function buildTx<TMsg>(opts: TxBuilderOptions) {
client.addEncoders(opts.encoders ?? []);
client.addConverters(opts.converters ?? []);
const data = [
{
typeUrl: opts.typeUrl,
value: message,
},
];
const data = Array.isArray(message)
? message.map(msg => ({
typeUrl: opts.typeUrl,
value: msg,
}))
: [{
typeUrl: opts.typeUrl,
value: message,
}];
return client.signAndBroadcast!(signerAddress, data, fee, memo);
};
}
Expand Down
15 changes: 9 additions & 6 deletions packages/telescope/src/helpers/helper-func-types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,12 +92,15 @@ export function buildTx<TMsg>(opts: TxBuilderOptions) {
client.addEncoders(opts.encoders ?? []);
client.addConverters(opts.converters ?? []);
const data = [
{
typeUrl: opts.typeUrl,
value: message,
},
];
const data = Array.isArray(message)
? message.map(msg => ({
typeUrl: opts.typeUrl,
value: msg,
}))
: [{
typeUrl: opts.typeUrl,
value: message,
}];
return client.signAndBroadcast!(signerAddress, data, fee, memo);
};
}
Expand Down
49 changes: 35 additions & 14 deletions packages/telescope/src/helpers/react-query-hooks-icjs.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,6 +111,15 @@ export const useRpcClient = <TData = ProtobufRpcClient>({
}, options);
};
const getRpcClientFromCache = (
queryClient: ReturnType<typeof useQueryClient>,
key: string,
rpcEndpoint?: string | HttpEndpoint
): Rpc | undefined => {
const queryKey = rpcEndpoint ? [key, rpcEndpoint] : [key];
return queryClient.getQueryData<Rpc>(queryKey);
};
export interface UseQueryBuilderOptions<TReq, TRes> {
builderQueryFn: (clientResolver?: RpcResolver) => (request: TReq) => Promise<TRes>,
queryKeyPrefix: string,
Expand All @@ -132,16 +141,17 @@ export function buildUseQuery<TReq, TRes>(opts: UseQueryBuilderOptions<TReq, TRe
if(isRpc(clientResolver)) {
rpcResolver = clientResolver;
} else if(isCacheResolver(clientResolver)) {
const key = clientResolver.clientQueryKey || DEFAULT_RPC_CLIENT_QUERY_KEY;
const queryKey = clientResolver.rpcEndpoint ? [key, clientResolver.rpcEndpoint] : [key];
rpcResolver = queryClient.getQueryData<Rpc>(queryKey);
if(!rpcResolver && clientResolver.rpcEndpoint) {
rpcResolver = clientResolver.rpcEndpoint;
}
} else {
rpcResolver = clientResolver;
const key = isCacheResolver(clientResolver)
? clientResolver.clientQueryKey || DEFAULT_RPC_CLIENT_QUERY_KEY
: DEFAULT_RPC_CLIENT_QUERY_KEY;
const endpoint = isCacheResolver(clientResolver) ? clientResolver.rpcEndpoint : undefined;
const cachedClient = getRpcClientFromCache(queryClient, key, endpoint);
// For CacheResolver with endpoint, use endpoint as fallback if no cached client
rpcResolver = cachedClient ||
(isCacheResolver(clientResolver) && clientResolver.rpcEndpoint ? clientResolver.rpcEndpoint :
(!isCacheResolver(clientResolver) ? clientResolver : undefined));
}
const queryFn = opts.builderQueryFn(rpcResolver);
Expand Down Expand Up @@ -170,6 +180,14 @@ export interface UseMutationBuilderOptions<TMsg> {
) => Promise<DeliverTxResponse>,
}
const getSigningClientFromCache = (
queryClient: ReturnType<typeof useQueryClient>,
key: string,
rpcEndpoint?: string | HttpEndpoint
): ISigningClient | undefined => {
const queryKey = rpcEndpoint ? [key, rpcEndpoint] : [key];
return queryClient.getQueryData<ISigningClient>(queryKey);
};
export function buildUseMutation<TMsg, TError>(opts: UseMutationBuilderOptions<TMsg>) {
return ({
Expand All @@ -184,12 +202,15 @@ export function buildUseMutation<TMsg, TError>(opts: UseMutationBuilderOptions<T
if(isISigningClient(clientResolver)) {
signingClientResolver = clientResolver;
} else if(isCacheResolver(clientResolver)) {
const key = clientResolver.clientQueryKey || DEFAULT_SIGNING_CLIENT_QUERY_KEY;
const queryKey = clientResolver.rpcEndpoint ? [key, clientResolver.rpcEndpoint] : [key];
signingClientResolver = queryClient.getQueryData<ISigningClient>(queryKey);
} else {
clientResolver = clientResolver;
// For both CacheResolver and other cases, try to get from cache first
const key = isCacheResolver(clientResolver)
? clientResolver.clientQueryKey || DEFAULT_SIGNING_CLIENT_QUERY_KEY
: DEFAULT_SIGNING_CLIENT_QUERY_KEY;
const endpoint = isCacheResolver(clientResolver) ? clientResolver.rpcEndpoint : undefined;
const cachedClient = getSigningClientFromCache(queryClient, key, endpoint);
signingClientResolver = cachedClient || (!isCacheResolver(clientResolver) ? clientResolver : undefined);
}
const mutationFn = opts.builderMutationFn(signingClientResolver);
Expand Down
Loading

0 comments on commit 38bb4ec

Please sign in to comment.