💬
Get Help
FT
Fernando Tancredi

Long API Response Times Issue

Hi FlutterFlow Community,

I'm currently working on a project where I've encountered an issue with API calls and would appreciate any insights or suggestions you might have.

Issue Description: I have set up an API call to a Google Cloud Function that connects to the OpenAI API for GPT-4. The complexity of the prompt means that the output typically takes around 2 minutes to complete. Unfortunately, FlutterFlow doesn't seem to wait for the API result before proceeding in the action tree, leading to incomplete or missing data in the subsequent steps.

Technical Details:

  • The API is set to handle requests with a 9-minute timeout.

  • This issue seems to have started a few months ago, possibly related to the introduction of the "Non-Blocking" action functionality in FlutterFlow.

  • I've also tried using FlutterFlow's built-in cloud function feature to call the Google Cloud Function, but it didn't resolve the issue.

I'm attaching the code for my Google Cloud Function for reference.

Code Snippet:

const axios = require('axios');
const VALID_API_KEY = process.env.YOUR_API_KEY_ENV_VAR;  // Replace with your actual API key

exports.callGPT4 = async (req, res) => {
  console.log("Function entered"); // Debug log

  const allowedOrigins = [
    'https://prognuz.flutterflow.app',
    'https://app.flutterflow.io/',
    'https://web.prognuz.com/',
    'https://ff-debug-service-frontend-ygxkweukma-uc.a.run.app'  // Include this
  ];
  
  const origin = req.headers.origin;
  console.log("Origin:", origin); // Debug log

  if (allowedOrigins.includes(origin)) {
    res.set('Access-Control-Allow-Origin', origin);
  }

  if (req.method === 'OPTIONS') {
    console.log("Handling preflight"); // Debug log

    res.set('Access-Control-Allow-Methods', 'POST');
    res.set('Access-Control-Allow-Headers', 'Content-Type, x-api-key');
    res.set('Access-Control-Max-Age', '3600');
    res.status(204).send('');
    return;
  }

  // Check API Key
  const apiKey = req.headers['x-api-key'];
  if (!apiKey || apiKey !== VALID_API_KEY) {
    return res.status(401).send("Invalid or missing API key.");
  }

  // Your existing logic
  const prompt = req.body.prompt;

  if (!prompt) {
    res.status(400).send('No prompt provided.');
    return;
  }

  const openAIUrl = 'https://api.openai.com/v1/chat/completions';
  const openAIKey = process.env.OPENAI_API_KEY;

  const headers = {
    'Content-Type': 'application/json',
    'Authorization': `Bearer ${openAIKey}`
  };

  const body = {
    model: 'gpt-4-1106-preview',
    response_format:{ "type": "json_object" },
    messages: prompt
  };

return axios.post(openAIUrl, body, { headers, timeout:540000 })
  .then(response => {
    // Handle success
    res.status(200).send(response.data);
  })
  .catch(error => {
    // Handle error
    console.error(error);
    res.status(error.response?.status || 500).send(error.response?.data || 'Internal Server Error');
  });

};

Questions:

  1. Is there a way to ensure FlutterFlow waits for the complete response from a long-running API call before moving forward in the action tree?

  2. Has anyone else faced similar issues with API calls in FlutterFlow, especially with longer response times?

Any help or guidance would be greatly appreciated, as this is a critical component of my project.

Thank you in advance!

5
11 replies