# Query evaluation

Learn how to evaluate queries in real-time.

This guide provides practical examples of using the Nuxt SDK to evaluate [CQL queries](/reference/cql/introduction) from your application.

## Basic usage

To evaluate queries, you can use either the [`useEvaluation`](api/composables/use-evaluation) composable or the [`<Personalization>`](api/components/personalization) component, depending on whether you prefer an imperative or declarative approach. Both use Nuxt's `useAsyncData` under the hood, so the query is evaluated on the server during SSR and the result is hydrated on the client.

> **How about client-side rendering?**
>
> For client-side rendering, you can use the composables and components from `@croct/plug-nuxt/csr`, which follow the same patterns as the [Vue SDK](/reference/sdk/vue/query-evaluation#basic-usage).

Here is an example:

**Composable — JavaScript**

```vue
<script setup>
const {data: isDeveloper} = await useEvaluation("user's persona is 'developer'");
</script>

<template>
  <a v-if="isDeveloper" href="/docs">View docs</a>
  <a v-else href="/share">Share with your developer</a>
</template>
```

**Composable — TypeScript**

```vue
<script setup lang="ts">
const {data: isDeveloper} = await useEvaluation<boolean>("user's persona is 'developer'");
</script>

<template>
  <a v-if="isDeveloper" href="/docs">View docs</a>
  <a v-else href="/share">Share with your developer</a>
</template>
```

**Component — JavaScript**

```vue
<template>
  <Personalization query="user's persona is 'developer'" v-slot="{ result }">
    <a v-if="result" href="/docs">View docs</a>
    <a v-else href="/share">Share with your developer</a>
  </Personalization>
</template>
```

**Component — TypeScript**

```vue
<template>
  <Personalization query="user's persona is 'developer'" v-slot="{ result }">
    <a v-if="result" href="/docs">View docs</a>
    <a v-else href="/share">Share with your developer</a>
  </Personalization>
</template>
```

Note that the result of the evaluation is not limited to boolean values. For example, you can use the following query to find out the location from which the user is accessing your application:

**Composable — JavaScript**

```vue
<script setup>
const {data: location} = await useEvaluation("location");
</script>

<template>
  <address v-if="location">
    {{ location.cityName }}, {{ location.stateName }} - {{ location.countryName }}
  </address>
</template>
```

**Composable — TypeScript**

```vue
<script setup lang="ts">
type Location = {
  cityName: string,
  stateName: string,
  countryName: string,
};

const {data: location} = await useEvaluation<Location>("location");
</script>

<template>
  <address v-if="location">
    {{ location.cityName }}, {{ location.stateName }} - {{ location.countryName }}
  </address>
</template>
```

**Component — JavaScript**

```vue
<template>
  <Personalization query="location" v-slot="{ result: location }">
    <address>
      {{ location.cityName }}, {{ location.stateName }} - {{ location.countryName }}
    </address>
  </Personalization>
</template>
```

**Component — TypeScript**

```vue
<template>
  <Personalization query="location" v-slot="{ result: location }">
    <address>
      {{ location.cityName }}, {{ location.stateName }} - {{ location.countryName }}
    </address>
  </Personalization>
</template>
```

In this case, the result of the evaluation is a [geographic location](/reference/cql/data-types/location/location), and the output would look something like this:

**Rendered output**

```html
<address>San Francisco, California - United States</address>
```

## Fault tolerance

You should always provide a fallback value when evaluating queries to make your application resilient to unexpected errors, downtime, and network failures.

All you have to do is specify the result you want to use as a fallback:

**Composable — JavaScript**

```vue
<script setup>
const {data: returning} = await useEvaluation("user is returning", {
  fallback: false,
});
</script>

<template>
  <p v-if="returning">Welcome back!</p>
  <p v-else>Welcome!</p>
</template>
```

**Composable — TypeScript**

```vue
<script setup lang="ts">
const {data: returning} = await useEvaluation<boolean>("user is returning", {
  fallback: false,
});
</script>

<template>
  <p v-if="returning">Welcome back!</p>
  <p v-else>Welcome!</p>
</template>
```

**Component — JavaScript**

```vue
<template>
  <Personalization query="user is returning" :fallback="false" v-slot="{ result: returning }">
    <p v-if="returning">Welcome back!</p>
    <p v-else>Welcome!</p>
  </Personalization>
</template>
```

**Component — TypeScript**

```vue
<template>
  <Personalization query="user is returning" :fallback="false" v-slot="{ result: returning }">
    <p v-if="returning">Welcome back!</p>
    <p v-else>Welcome!</p>
  </Personalization>
</template>
```

In this example, the result is set to `false` if the evaluation fails, ensuring that the application will work even if the evaluation fails.

## Context variables

In some cases, you may want to pass additional information that can be used by the query in the evaluation process.

For example, let's say you want to check whether the user is accessing your application from one of a list of countries. The SDK allows you to pass this information as an attribute to the query:

**Composable — JavaScript**

```vue
<script setup>
const {data: enabled} = await useEvaluation(
  "context's countries include location's countryName",
  {
    context: {
      attributes: {
        countries: ['United States', 'Canada', 'Mexico'],
      },
    },
  }
);
</script>

<template>
  <span v-if="enabled">Available</span>
  <span v-else>Unavailable</span>
</template>
```

**Composable — TypeScript**

```vue
<script setup lang="ts">
const {data: enabled} = await useEvaluation<boolean>(
  "context's countries include location's countryName",
  {
    context: {
      attributes: {
        countries: ['United States', 'Canada', 'Mexico'],
      },
    },
  }
);
</script>

<template>
  <span v-if="enabled">Available</span>
  <span v-else>Unavailable</span>
</template>
```

**Component — JavaScript**

```vue
<script setup>
const attributes = {countries: ['United States', 'Canada', 'Mexico']};
</script>

<template>
  <Personalization
    query="context's countries include location's countryName"
    :attributes="attributes"
    v-slot="{ result: enabled }"
  >
    <span v-if="enabled">Available</span>
    <span v-else>Unavailable</span>
  </Personalization>
</template>
```

**Component — TypeScript**

```vue
<script setup lang="ts">
const attributes = {countries: ['United States', 'Canada', 'Mexico']};
</script>

<template>
  <Personalization
    query="context's countries include location's countryName"
    :attributes="attributes"
    v-slot="{ result: enabled }"
  >
    <span v-if="enabled">Available</span>
    <span v-else>Unavailable</span>
  </Personalization>
</template>
```

Any attribute passed in the [`attributes`](api/components/personalization#attributes-prop) option will be available in the query as a [`context`](/reference/cql/data-types/web/web-context) variable.

## Explore

- [CQL reference](/reference/cql/expressions/basics): Learn how to write queries using the CQL language.
- [Evaluate composable](api/composables/use-evaluation): Explore the composable documentation and available options.