How to get a return value from a route action

[miguelisidoro]

Hi,

I have the following code:

React component - submits to a route using fetcher.submit:

export default function AIAssistant() {
  const fetcher = useFetcher<typeof submitAction>();
  const [isLoaded, setIsLoaded] = useState(false);
  useEffect(() => {
    setIsLoaded(true);
  }, []);

  async function getResponse(userInput: string) {
		try {
      const formData = new FormData();
      fetcher.submit(formData, { method: 'post', action: `/ai-assistant/submit?userInput=${encodeURI(userInput  || '')}` });
      return fetcher.data;
      //return response;
		}
    catch (error) {
      console.error(error);
    }
  }
}

Route - has an action method that receives the call from the component and returns a response.

export async function action({ request }: any) {
  try {
    debug();

    const token = await getAzureADToken();

    const aiOpenAIEndpoint = 'https://myapi.azurewebsites.net/api/question';
    const url = new URL(request.url);
    const apiRequest = buildRequest(url.searchParams.get('userInput'));
    const httpClient = new HttpClient(aiOpenAIEndpoint, 'Bearer ' + token, 'application/json');
    const response = await httpClient.post(aiOpenAIEndpoint, apiRequest).then((response: any) => {
      const responseMessage = response.message;
      console.log(responseMessage);
      return responseMessage;
    });

    return response;
  } catch (error) {
    return json({ error: error });
  }
}

How can I get the response returned by the action in my React component?

Thanks

[miguelisidoro]

Problem solved.

export default function AIAssistant() {
  const [isLoaded, setIsLoaded] = useState(false);
  useEffect(() => {
    setIsLoaded(true);
  }, []);

  async function getResponse(userInput: string) {
		try {
      const aiAssistantnSubmitActionUrl = `/ai-assistant/submit?userInput=${encodeURI(userInput)}`;
      
      const response = await fetch(aiAssistantnSubmitActionUrl, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
      });
      
      const responseMessage = response.json().then((data) => {
        return data;
      });
      console.log(responseMessage);
      
      return responseMessage;
		}
    catch (error) {
      console.error(error);
    }
	}