cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 

Grail Document is listed after a delete operation

gilgi
DynaMight Champion
DynaMight Champion

Hi, 

I'm using the document service in an app. The list documents is invoked whenever one component is being loaded.

What I've seen is after I delete a document (from an internal component) or insert a new document from another page in the app, the documents list is not updated (it either includes the deleted element or is empty as it was before the document was added again).

My list code is as follows:

 

import { useQuery } from "@tanstack/react-query";
import { Meta } from "../models/Meta";
import { documentsClient, DocumentMetaData } from "@dynatrace-sdk/client-document";

async function fetcher() {
    let res = await documentsClient.listDocuments({
        filter: "type='haloAppDocument'",
        pageSize: 50,
        sort:"name"
    });
    const documents: DocumentMetaData[] = [];
    if (res.documents) documents.push(...res.documents);
    while (res.nextPageKey) {
      res = await documentsClient.listDocuments({ pageKey: res.nextPageKey });
      if (res.documents) documents.push(...res.documents);
    }
    return documents;
  }
  export const useListHaloDocuments = () => {
    const meta: Meta = {
      errorTitle: "Failed to query documents",
    };
    return useQuery({
      queryFn: () => fetcher(),
      queryKey: ["documents-list" ],
      meta,
    });
  };

 

and deletion code (for example) is as follows:

 

            let res = await documentsClient.deleteDocument({
                id: haloAppDocument.documentId,
                optimisticLockingVersion: haloAppDocument.documentMetaData.version
            })
            .then(()=> {
                if (deleteFromListFunc!==undefined) {
                    deleteFromListFunc(haloAppDocument.documentId);
                }
            })
            .catch((e) => {
                showToast({
                    title: "Failed To Delete Document",
                    message : "An error occurred deleteing document "+haloAppDocument.documentName+". The error message was: "+e.message ,
                    type: "critical",
                    lifespan: 4000
                });
            });

 

Not sure if it helps understanding the issue but in eth dev tools I saw after each GET command to the list of documents with the right filter, a POST request to "http://localhost:3000/platform/document/v1/documents" that includes the details of the deleted document for example.

What is this POST request?

As a side note, I've seen recent posts abotu the new dynatrace react hooks which might handle this much easier (see https://developer.dynatrace.com/reference/sdks/react-hooks/#documents-and-appstate), however could not find any decent example or documentation regarding the use of that. Should this be the solution?  

What is the best practice to handle these doucments and their manipulations?

3 REPLIES 3

sinisa_zubic
Dynatrace Champion
Dynatrace Champion

Hi @gilgi 

I hope I have fully got what you want to achieve 🙂

 

The list of documents is persisted in the document service  This means after any manipulation of a document, you to let the document service now about the changes via CRUD operations. 

You are using the same document in multiple components at the same time and expect that an update of the document in one component triggers also the update of the document in other components where it is being used. This is not the case. If you want that your document or list of document is updated within any used component of your app, you have to use react state. Here you have further information how to use states between components:  https://react.dev/learn/sharing-state-between-components

 

In case I misunderstood you, feel free to join our office hours  next Monday. There we can discuss your question further.

 

Best,
Sini

sinisa_zubic
Dynatrace Champion
Dynatrace Champion

@gilgi have you been able to reproduce the issue without using @tanstack/react-query ?

I have tried all CRUD operations described here in a small reproducer. Did not notice any issues. Apps like notebooks or dashboards use also the same SDKs to work with documents. when creating/updating/deleting notebooks I have not noticed any issues there.

gilgi
DynaMight Champion
DynaMight Champion

Hi @sinisa_zubic ,

Thanks for following up on this. I've actually did change some things, mostly switched to your react-hooks and have used the refetch. Additionally, I've seen that on the base tanstack library there is also another property that could be used with is the staleTime, controlling when data becomes "invalid" and forcing real data retrieval and not using the cache when being asked.

Gil.

Featured Posts