I'm developing a plugin for Backstage that performs checks via API on Argo CD.

1. GET request to collect information about an application https://argocd.acme.com/api/v1/applications/${app-name}

2. If the status.sync.status is "OutOfSync", I render a button that allows to perform the POST request to update that state https://argocd.acme.com/api/v1/applications/${app -name}/sync.

3. (What I need help with): After the POST request completes, I want to refresh the entire component page (Perform the initial GET again)

Here is the code of my component responsible for the POST request:

import React from 'react';
import { useApi } from '@backstage/core-plugin-api';
import { useEntity } from '@backstage/plugin-catalog-react';
import { Button } from '@material-ui/core';
import { argoCDApiRef } from '../../api';
import Alert from '@material-ui/lab/Alert';

export const SyncFetchComponent = () => {
    const apiClient = useApi(argoCDApiRef);
    const { entity } = useEntity();
    
    async function PostSyncStatus() {
        const response = await apiClient.updataSyncStatus(`${entity.metadata.name}`);
        
        if(response.status !== 200) {
            return <Alert severity='error'>Error at Sync Proccess</Alert>;
        };

        return response;
    };
 
    return (
        <Button onClick={PostSyncStatus}>
            Sync App
        </Button>
    );
};

CodePudding user response：

You can use

window.location.reload(false);

or update the state of your component you want to update

CodePudding user response：

Use window.location.reload() when the request has completed:

async function PostSyncStatus() {
  const response = await apiClient.updataSyncStatus(`${entity.metadata.name}`);

  if (response.status !== 200) {
    return <Alert severity='error'>Error at Sync Proccess</Alert>;
  }
  
  window.location.reload();
  

  return response;
};