#Networking

Many mobile apps need to load resources from remote URLs. You might want to make a POST request to a REST API or fetch a large amount of static content from another server.

#Using Fetch

Lynx provides a Fetch API that is compatible with the standard Web API. You can refer to the MDN guide on Using Fetch for more information.

This example app fetches and displays user posts from the JSONPlaceholder API. It initializes with a loading state and triggers a Fetch API request to retrieve posts upon mounting. The fetched data is then displayed in a scrollable list, showing each post's ID and title. A "Loading..." message appears if the request is still in progress.

networkingsrc/fetch/index.tsx

Preview

#Making Requests

To fetch content from an arbitrary URL, you can pass the URL to fetch:

fetch('https://jsonplaceholder.typicode.com/todos/1');

fetch also takes an optional second argument that allows you to customize the HTTP request. You may want to specify additional headers, make a POST request, or provide a JSON body:

fetch('https://jsonplaceholder.typicode.com/todos/1', {
  method: 'POST',
  headers: {
    'some-header': 'header',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({
    firstParam: 'yourValue',
    secondParam: 'yourOtherValue',
  }),
});

Take a look at the Fetch Request for the properties supported by Lynx.

#Handling the Response

The above examples show how you can make a request. In many cases, you will want to do something with the response.

Networking is an inherently asynchronous operation. The fetch method returns a Promise, which makes it straightforward to write code that works asynchronously. You can use the async/await syntax to await the promise's resolution:

const getDataFromApiAsync = async () => {
  try {
    const response = await fetch(
      'https://jsonplaceholder.typicode.com/todos/1',
    );
    const json = await response.json();
    return json;
  } catch (error) {
    console.error(error);
  }
};

Take a look at the Fetch Response for the properties supported by Lynx.

Don't forget to catch any errors that fetch may throw; otherwise, they will be silently ignored.

#Using Streaming Fetch

When transmitting large amounts of data, the server typically uses Streaming HTTP to send data incrementally. In such cases, the client can leverage the streaming capabilities of the fetch interface to receive and process data in batches in real time, thereby significantly improving data processing efficiency.

fetch('https://sse.dev/test').then((response) => {
  const reader = response.body.getReader();
  while (true) {
    const { done, value } = await reader.read();
    if (done) {
      break;
    } else {
      const text = TextCodecHelper.decode(value);
      setData(text);
    }
  }
});

You can refer to the MDN documentation Response: body to learn how to handle a streaming body.

#Using EventSource

Lynx provides the EventSource with the same usage as the Web.

You can refer to the MDN guides on Using server-sent events for more information.

const url = 'https://sse.dev/test';
const eventSource = new lynx.EventSource(url2);

eventSource.onmessage = (event) => {
  console.log('Received message:', event.data);
};

eventSource.onerror = (error) => {
  console.error('EventSource failed:', error);
};

#Using TextCodecHelper

Due to the lack of TextEncoder/TextDecoder support in PrimJS, Lynx provides TextCodecHelper for basic encoding and decoding operations. This class supports UTF-8 conversions between string and arraybuffer.

Usage:

Convert arraybuffer to string:

const str = TextCodecHelper.decode(arraybuffer);

Convert string to arraybuffer:

const arraybuffer = TextCodecHelper.encode(str);

#Using Other Networking Libraries

The Fetch API is built into Lynx, which means you can use third-party libraries that rely on it.

It is important to note that Lynx's Fetch API has subtle differences compared to the Web Fetch API. You can check the Fetch API Reference - Compatibility section to learn more about these differences. As a result, you may need to adapt libraries from the web ecosystem to ensure compatibility. If you encounter any issues with the Lynx Fetch API, you are welcome to submit feature requests or contribute to help Lynx better support the web ecosystem.

For front-end framework-specific data fetching solutions, such as using TanStack Query (React Query) in ReactLynx, you can refer to the Data Fetching chapter of the ReactLynx guide.