#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.

#Chunked Transfer Encoding

Chunked Transfer Encoding is ideal for streaming large amounts of data to the client. This method allows the client to process data in chunks as they arrive, reducing overall latency.

To learn more about this standard, see the MDN guide on Chunked transfer encoding.

To enable chunked transfer encoding, set the useStreaming option to true inside lynxExtension.

You can refer to the MDN guides on Response: body to know more about how to process streaming body.

#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.