Invalidate query not working

I'd like to invalidate my query but it doesn't seem to be working so I'm thinking I'll pass refetch as a prop and just retrigger the query.

This is what my query looks like in one component:

  const { refetch: refetchDefinitionData } =
    trpc.product.getProductDefinition.useQuery(
      { productId: selectedDefinition ? selectedDefinition.id : "" },
      { enabled: false, refetchOnWindowFocus: false, refetchOnReconnect: false }
    );

useEffect(() => {
  (async () => {
        const definitionData = await refetchDefinitionData();
        setData(definitionData.data);
     })();
 }, [refetchDefinitionData, selectedDefinition]);

  const { refetch: refetchDefinitionData } =
    trpc.product.getProductDefinition.useQuery(
      { productId: selectedDefinition ? selectedDefinition.id : "" },
      { enabled: false, refetchOnWindowFocus: false, refetchOnReconnect: false }
    );

useEffect(() => {
  (async () => {
        const definitionData = await refetchDefinitionData();
        setData(definitionData.data);
     })();
 }, [refetchDefinitionData, selectedDefinition]);

This is what I'm doing to invalidate it in another component. But the page is not re-rendering with new data.
I've tried removing the query options like enabled, refetchOnWindowFocus, etc but it still doesn't work.
Maybe I am doing something dumb.

 <button
       onClick={() => {
            (async () => {
                await addChildToParent({
                 parentId: parentDefinitionId,
                 childId: definition.id,
                });

                utils.product.getProductDefinition.invalidate();
                     
                dispatch(
                   uiActions.toggleSelectDefinitionModal({
                      parentDefinitionId: null,
                      topLevelDefinitionId: null,
                   })
                );
              })();
         }}
        >

 <button
       onClick={() => {
            (async () => {
                await addChildToParent({
                 parentId: parentDefinitionId,
                 childId: definition.id,
                });

                utils.product.getProductDefinition.invalidate();
                     
                dispatch(
                   uiActions.toggleSelectDefinitionModal({
                      parentDefinitionId: null,
                      topLevelDefinitionId: null,
                   })
                );
              })();
         }}
        >

If I need to pass refetch as a prop, I'm seeing this as the type upon hovering over refetch.
Not sure what the <unknown> is about or what TRPCClientErrorLike is expecting.
Fguring out this type does not sound fun.

refetchDefinitionData: <unknown>(options?: (RefetchOptions & RefetchQueryFilters<unknown>) | undefined) => Promise<QueryObserverResult<{
    productList: ProductList[];
    product: Product | null;
    ... 34 more ...;
    competitorReference: boolean | null;
}[], TRPCClientErrorLike<...>>>

refetchDefinitionData: <unknown>(options?: (RefetchOptions & RefetchQueryFilters<unknown>) | undefined) => Promise<QueryObserverResult<{
    productList: ProductList[];
    product: Product | null;
    ... 34 more ...;
    competitorReference: boolean | null;
}[], TRPCClientErrorLike<...>>>

TTC

Theo's Typesafe Cult•4y ago

jix74

Invalidate query not working

I'd like to invalidate my query but it doesn't seem to be working so I'm thinking I'll pass refetch as a prop and just retrigger the query.

This is what my query looks like in one component:

  const { refetch: refetchDefinitionData } =
    trpc.product.getProductDefinition.useQuery(
      { productId: selectedDefinition ? selectedDefinition.id : "" },
      { enabled: false, refetchOnWindowFocus: false, refetchOnReconnect: false }
    );

useEffect(() => {
  (async () => {
        const definitionData = await refetchDefinitionData();
        setData(definitionData.data);
     })();
 }, [refetchDefinitionData, selectedDefinition]);

  const { refetch: refetchDefinitionData } =
    trpc.product.getProductDefinition.useQuery(
      { productId: selectedDefinition ? selectedDefinition.id : "" },
      { enabled: false, refetchOnWindowFocus: false, refetchOnReconnect: false }
    );

useEffect(() => {
  (async () => {
        const definitionData = await refetchDefinitionData();
        setData(definitionData.data);
     })();
 }, [refetchDefinitionData, selectedDefinition]);

 <button
       onClick={() => {
            (async () => {
                await addChildToParent({
                 parentId: parentDefinitionId,
                 childId: definition.id,
                });

                utils.product.getProductDefinition.invalidate();
                     
                dispatch(
                   uiActions.toggleSelectDefinitionModal({
                      parentDefinitionId: null,
                      topLevelDefinitionId: null,
                   })
                );
              })();
         }}
        >

 <button
       onClick={() => {
            (async () => {
                await addChildToParent({
                 parentId: parentDefinitionId,
                 childId: definition.id,
                });

                utils.product.getProductDefinition.invalidate();
                     
                dispatch(
                   uiActions.toggleSelectDefinitionModal({
                      parentDefinitionId: null,
                      topLevelDefinitionId: null,
                   })
                );
              })();
         }}
        >

refetchDefinitionData: <unknown>(options?: (RefetchOptions & RefetchQueryFilters<unknown>) | undefined) => Promise<QueryObserverResult<{
    productList: ProductList[];
    product: Product | null;
    ... 34 more ...;
    competitorReference: boolean | null;
}[], TRPCClientErrorLike<...>>>

refetchDefinitionData: <unknown>(options?: (RefetchOptions & RefetchQueryFilters<unknown>) | undefined) => Promise<QueryObserverResult<{
    productList: ProductList[];
    product: Product | null;
    ... 34 more ...;
    competitorReference: boolean | null;
}[], TRPCClientErrorLike<...>>>

Invalidate query not working

Invalidate query not working

Similar Threads

Similar Threads

Similar Threads