microsoftgraph / microsoft-graph-toolkit

Authentication Providers and UI components for Microsoft Graph 🦒
https://docs.microsoft.com/graph/toolkit/overview
Other
953 stars 306 forks source link

[BUG] Cache does not seem to be working on FileList component #3248

Closed russgove closed 4 months ago

russgove commented 4 months ago

I am using the filelist component in a teams tab. The component keeps making calls to the graph to get the files even though they were already loaded and are in the cache.

 <FileList
            siteId={props.displayFolder.SiteId}
            driveId={props.displayFolder.DriveId}
            itemId={localFolderId}
            disableOpenOnClick={true}
            pageSize={10}

            key={localFolderId}
            itemClick={itemSelected()}>
            <MyEvent template="loading"></MyEvent>
        </FileList>

To Reproduce Steps to reproduce the behavior:

  1. Add a filelist component to a teams tab.
  2. Run the app
  3. Start fiddler
  4. reload the page several times
  5. You will see the calls made to the graph to get the files on each reload

Expected behavior The files should be retrieved from the cache n your problem.

Environment (please complete the following information):

Additional context In troubleshooting this i ended up looking at the GetIterator method in graph.files.ts When we are getting files from the cache we use this: const fileList = await getFileListFromCache(cache, storeName, ${endpoint}:${top});

When adding files to the cache we use this

await cache.putValue(endpoint, { files: filesPageIterator.value.map(v => JSON.stringify(v)), nextLink });

so the keys to not seem to match. When we get the key is ${endpoint}:${top}, when we put the key is endpoint.

musale commented 4 months ago

@russgove thank you for figuring this out! I can confirm that the keys are inconsistent in https://github.com/microsoftgraph/microsoft-graph-toolkit/blob/62b1ed4a924d9b407c2749ee8b093f98fa6e8050/packages/mgt-components/src/graph/graph.files.ts#L257

and in getting the values here: https://github.com/microsoftgraph/microsoft-graph-toolkit/blob/62b1ed4a924d9b407c2749ee8b093f98fa6e8050/packages/mgt-components/src/graph/graph.files.ts#L275-L278

The key can be moved out to its own variable and reused throughout the code block. Would you be interested in putting up a PR for this?