TTC
Theo's Typesafe Cult•3y 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]);
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<...>>>
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?