Webflow GraphQL API?

Design help Data API
1

Hello,

I was wondering if Webflow was considering migrating to a GraphQL API instead of the REST based one ? The hype about GraphQL is all over the place - Would that make sense for Webflow ? If not, why not ?

(just being curious) :slight_smile:
Anthony

2

Hi Anthony,
Not affiliated with Webflow, but wanted to chip-in that I bet this is on their roadmap eventually. I say that because Vlad, the CEO, has previously tweeted about how they already use GraphQL and Apollo internally to power the visual CMS.

And I agree, a GraphQL API for developers would be sweet!!
Chris

1 Like
3

Thanks alot for your feedback @cspags, appreciate !

4

Hi there :slight_smile:

Is there any way we could use the GraphQL API, or still not implemented ? Is there a way to get around GraphQL querries by using solely the fetch API instead ?

5

Your best bet would be to leverage an external service like directus into your site. Webflow’s API is limiting.

1 Like
6

Hi @webdev !

Thank you, I have succeeded in using the fetch API to wrap the GraphQL querry and inject it into the body like so:

async function getTotalValueLocked() {
  try {
    // globals
    const url = `https://abc.abc.abc/graphql`,
      query = `{
          someData {
            marketCap
            swapVolume24h
          }
        }`;

    // fetching data
    const results = await fetch(url, {
      method: `POST`,
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        query: query
      })
    });

    // handling data
    const data = await results.json();
    console.log(data);

    // handling error
  } catch (error) {
    console.log(`error`, error);
  } // end try/catch

} // end getTotalValueLocked()
getTotalValueLocked();

works perfectly !

7

Hey @anthonysalamin I’m currently trying to get a GraphQL API to work like this so I can get the JSON data. Unfortunately when using your code I’m getting a console error.

I was sent an API call by my engineers and was wondering if I had correctly converted it into your code block.

curl --location 'https://def.def.def/graphql' --header 'Content-Type: application/json' --data '{"query":"query MortgageProducts { product_rate { id name interest_rate reference_interest_rate comparison_rate rate_adjustment installments_to_first_rate_adjustment installments_per_rate_adjustment }}","variables":{}}'

Which I transferd to:

async function getTotalValueLocked() {
  try {
    // globals
    const url = `https://def.def.def/graphql`,
      query = '{
          product_rate { 
            id name 
            interest_rate 
            reference_interest_rate 
            comparison_rate 
            rate_adjustment 
            installments_to_first_rate_adjustment
            installments_per_rate_adjustment
          }
        }';

    // fetching data
    const results = await fetch(url, {
      method: `POST`,
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({
        query: query
      })
    });

    // handling data
    const data = await results.json();
    console.log(data);

    // handling error
  } catch (error) {
    console.log(`error`, error);
  } // end try/catch

} // end getTotalValueLocked()
getTotalValueLocked();

Any help would be greatly appreciated :slight_smile: