Browser-Callable Services

package com.vaadin.demo.fusion.accessingbackend;

import com.vaadin.flow.server.auth.AnonymousAllowed;
import com.vaadin.hilla.BrowserCallable;

/**
 * A service that counts numbers.
 */
@BrowserCallable
@AnonymousAllowed
public class CounterService {

    /**
     * A method that adds one to the argument.
     */
    public int addOne(int number) {
        return number + 1;
    }
}

import type { EndpointRequestInit } from '@vaadin/hilla-frontend';
import client from './connect-client.default.js';

async function addOne(number: number, init?: EndpointRequestInit): Promise<number> {
  return client.call('CounterService', 'addOne', { number }, init);
}

export { addOne };

import { CounterService } from 'Frontend/generated/endpoints';

CounterService.addOne(1).then((result) => console.log(result));

import * as CounterService from 'Frontend/generated/CounterService';

CounterService.addOne(1).then((result) => console.log(result));

import { addOne } from 'Frontend/generated/CounterService';

addOne(1).then((result) => console.log(result));

package com.vaadin.demo.fusion.accessingbackend;

/**
 * An entity that contains an information about a city.
 */
public class City {
    private final String country;
    private final String name;

    public City(String name, String country) {
        this.country = country;
        this.name = name;
    }

    public String getName() {
        return name;
    }

    public String getCountry() {
        return country;
    }
}

package com.vaadin.demo.fusion.accessingbackend;

import com.vaadin.flow.server.auth.AnonymousAllowed;
import com.vaadin.hilla.BrowserCallable;

import java.util.Arrays;
import java.util.List;

/**
 * A browser-callable service that shows principles of work with entities.
 */
@BrowserCallable
@AnonymousAllowed
public class CountryService {
    private final List<City> cities = Arrays.asList(
            new City("Turku", "Finland"), new City("Berlin", "Germany"),
            new City("London", "UK"), new City("New York", "USA"));

    /**
     * A method that returns a collection of entities.
     */
    public List<City> getCities(Query query) {
        return query.getNumberOfCities() <= cities.size()
                ? cities.subList(0, query.getNumberOfCities())
                : cities;
    }

    /**
     * An entity specified as an inner class.
     */
    public static class Query {
        private final int numberOfCities;

        public Query(final int numberOfCities) {
            this.numberOfCities = numberOfCities;
        }

        public int getNumberOfCities() {
            return numberOfCities;
        }
    }
}

interface City {
  name?: string;
  country?: string;
}

export default City;

import { SlowService } from 'Frontend/generated/endpoints';

export function abortCall() {
  const controller = new AbortController();

  SlowService.takesTime({ signal: controller.signal }).then((msg) => console.log(msg));

  // The `AbortController` can be used to abort the request, for example after a timeout
  // or an user action like a button click
  const timeoutId = setTimeout(() => {
    controller.abort();
  }, 5000);

  return () => clearTimeout(timeoutId);
}

export function muteCall() {
  SlowService.takesTime({ mute: true }).then((msg) => console.log(msg));
}

import { SlowService } from 'Frontend/generated/endpoints';

export function abortCall() {
  const controller = new AbortController();

  SlowService.takesTime({ signal: controller.signal }).then((msg) => console.log(msg));

  // The `AbortController` can be used to abort the request, for example after a timeout
  // or an user action like a button click
  const timeoutId = setTimeout(() => {
    controller.abort();
  }, 5000);

  return () => clearTimeout(timeoutId);
}

export function muteCall() {
  SlowService.takesTime({ mute: true }).then((msg) => console.log(msg));
}

vaadin.endpoint.prefix=/api

import { ConnectClient } from '@vaadin/hilla-frontend';

const client = new ConnectClient({ prefix: 'api' });

export default client;

public class Account {

    @Positive
    private Long id;

    @NotEmpty(message = "Each account must have a non-empty username")
    private String username;

    // Getters and setters
}

@BrowserCallable
@AnonymousAllowed
public class AccountService {

    public void save(Account account, @NotNull String destination) {
        // ...
    }
}

package com.vaadin.demo.fusion.errorhandling;

import com.vaadin.flow.server.auth.AnonymousAllowed;
import com.vaadin.hilla.BrowserCallable;

import java.time.LocalDate;

@BrowserCallable
public class DateService {

    @AnonymousAllowed
    public LocalDate getTomorrow(LocalDate date) {
        return date.plusDays(1);
    }
}

import { EndpointValidationError } from '@vaadin/hilla-frontend';
import { DateService } from 'Frontend/generated/endpoints';

export async function callService() {
  try {
    // pass an illegal date
    const tomorrow = await DateService.getTomorrow('2021-02-29');
    console.log(tomorrow);
    // handle result...
  } catch (error) {
    if (error instanceof EndpointValidationError) {
      error.validationErrorData.forEach(({ parameterName, message }) => {
        console.warn(parameterName); // "date"
        console.warn(message); // "Unable to deserialize an endpoint method parameter into type 'java.time.LocalDate'"
      });
    } else {
      // handle other error types...
    }
  }
}

package com.vaadin.demo.pwa.offline;

import com.vaadin.flow.server.auth.AnonymousAllowed;
import com.vaadin.hilla.BrowserCallable;
import com.vaadin.hilla.exception.EndpointException;

@BrowserCallable
@AnonymousAllowed
public class DataService {

    public String getViewData() {
        throw new EndpointException("Not implemented");
    }
}

import { EndpointError } from '@vaadin/hilla-frontend';
import { DataService } from 'Frontend/generated/endpoints';

export async function callService() {
  try {
    await DataService.getViewData();
  } catch (error) {
    if (error instanceof EndpointError) {
      console.warn(error.message); // "Not implemented"
      console.warn(error.type); // "com.vaadin.hilla.exception.EndpointException"
    }
  }
}

import { EndpointError } from '@vaadin/hilla-frontend';
// Import the remote service
import { DataService } from 'Frontend/generated/endpoints';

// Wrap service calls to return fallback data when offline
export async function getViewData() {
  try {
    return await DataService.getViewData();
  } catch (e) {
    if (!(e instanceof EndpointError)) {
      // Network failure: return fallback data
      return [];
    }

    // Service reached but returned abnormal status code:
    // pass exception on to caller
    throw e;
  }
}