### Add Session Client Dependency to manifest.json

Source: https://github.com/vtex-apps/session-client/blob/master/docs/README.md

To install the Session Client app, add "vtex.session-client" to the "dependencies" list in your React app's `manifest.json` file. This makes the app available for use in your project.

```JSON
{
"dependencies": {
    "vtex.session-client": "1.x"
  }
}
```

--------------------------------

### Lazily Query Full User Session with useLazyFullSession Hook

Source: https://github.com/vtex-apps/session-client/blob/master/docs/README.md

The `useLazyFullSession` hook is similar to `useFullSession` but uses React Apollo's `useLazyQuery` hook. This allows you to trigger the session query on demand, for example, via a button click, instead of immediately on component render.

```tsx
import React from 'react'
import { useLazyFullSession } from 'vtex.session-client'

function MyComponent() {
  const [getSession, session] = useLazyFullSession()

  console.log({ session })

  return <button onClick={() => getSession()}>Get session</button>
}

export default MyComponent
```

--------------------------------

### GraphQL Query: Get Current User Session (`session`)

Source: https://github.com/vtex-apps/session-client/blob/master/docs/README.md

The `session` GraphQL query retrieves the current user's session data. It can optionally filter the returned session attributes by providing an array of `items` (strings matching session object attributes). The query returns either `SessionSuccess` with `id` and `namespaces` or `SessionError` with `type` and `message`.

```graphql
query session($items: [String]) {
  session(items: $items) @context(provider: "vtex.session-client") {
    ... on SessionSuccess {
      id
      namespaces
    }
    ... on SessionError {
      type
      message
    }
  }
}
```

--------------------------------

### GraphQL Schema Overview Diagram

Source: https://github.com/vtex-apps/session-client/blob/master/docs/session-client-graphql-api.md

Visual representation of the Session Client GraphQL API schema, illustrating the relationships between Query, Session, SessionError, and SessionSuccess types.

```APIDOC
classDiagram
  direction LR

  class Query {
    String version
    session(items [String]) Session
  }

  class SessionError {
    String type
    String message
  }

  class SessionSuccess {
    String! id
    SessionNamespaces namespaces
  }

  %% Links between classes
  Query --> Session : session
  Session --> SessionError : possibleType
  Session --> SessionSuccess : possibleType

  %% Click events
  click Query href "#query"
  click Session href "#session"
  click SessionError href "#sessionerror"
  click SessionSuccess href "#sessionsuccess"
```

--------------------------------

### GraphQL Query.session Field Documentation

Source: https://github.com/vtex-apps/session-client/blob/master/docs/session-client-graphql-api.md

Detailed documentation for the `session` field within the `Query` type, including its return type, purpose, and the `items` argument for specifying desired session data.

```APIDOC
Query.session:
  Type: Session
  Description: Retrieves the `vtex_session` cookie content if successful. The Get session endpoint from the Session Manager API is an equivalent implementation in REST. The `Session` union has two possible types: `SessionError` and `SessionSuccess`.

  Arguments:
    items:
      Type: [String]
      Description: Specifies the items from the `vtex_session` cookie that will be returned in the response. Each string defines the namespace and value of the items, with the `\"{namespace}.{value}\"` format. If this argument isn't declared, the response will have all the items in the `namespace` field. Example: `[\"store.channel\", \"store.countryCode\", \"impersonate.canImpersonate\"]`.
```

--------------------------------

### Query Full User Session with useFullSession Hook

Source: https://github.com/vtex-apps/session-client/blob/master/docs/README.md

The `useFullSession` hook runs a client-side GraphQL query to fetch the complete user session. It's a wrapper around React Apollo's `useQuery` and provides `loading`, `data`, and `error` states. Note that it cannot return session data during Server Side Rendering.

```tsx
import React from 'react'
import { useFullSession } from 'vtex.session-client'

function MyComponent() {
  const { loading, data, error } = useFullSession()

  if (loading) {
    return <>Session is loading</>
  }

  if (error) {
    return <>Session has errors</>
  }

  console.log({ session: data?.session })

  return <>Session is ready</>
}

export default MyComponent
```

--------------------------------

### Mermaid Diagram for VTEX Session Mutation API

Source: https://github.com/vtex-apps/session-client/blob/master/docs/session-client-graphql-api.md

This diagram visually represents the `Mutation` class, its `updateSession` method, and the `Session` union's possible return types: `SessionError` and `SessionSuccess`. It illustrates the relationships between these core API components.

```mermaid
classDiagram
    direction LR

    class Mutation {
        updateSession(fields SessionFieldsJSONInput!, items [String]) Session
    }

    class SessionError {
        String type
        String message
    }

    class SessionSuccess {
        String! id
        SessionNamespaces namespaces
    }

    %% Links between classes
    Mutation --> Session : updateSession
    Session --> SessionError : possibleType
    Session --> SessionSuccess : possibleType

    %% Click events
    click Mutation href "#mutation"
    click Session href "#session"
    click SessionError href "#sessionerror"
    click SessionSuccess href "#sessionsuccess"
```

--------------------------------

### Lazily Fetch Specific Session Attributes with useLazyFullSession Variables

Source: https://github.com/vtex-apps/session-client/blob/master/docs/README.md

Similar to `useFullSession`, the `useLazyFullSession` hook also supports a `variables` object with an `items` array. This allows you to specify which session attributes to fetch when the query is executed.

```tsx
useLazyFullSession({
  variables: {
    items: ['store.channel', 'store.countryCode']
  }
})
```

--------------------------------

### API Schema for VTEX SessionSuccess

Source: https://github.com/vtex-apps/session-client/blob/master/docs/session-client-graphql-api.md

This schema describes the `SessionSuccess` object, returned upon a successful `updateSession` mutation. It provides the `id` of the session and a `namespaces` object containing the updated content of the `vtex_session` cookie, structured by namespace.

```APIDOC
SessionSuccess:
  id: String!
    Description: Session ID.
  namespaces: SessionNamespaces
    Description: Namespaces object with the content of the `vtex_session` cookie. Each namespace has fields with specific information about the session. Check all the possible namespaces in the Sessions System documentation.
```

--------------------------------

### Read Session Data with useRenderSession Hook

Source: https://github.com/vtex-apps/session-client/blob/master/docs/README.md

The `useRenderSession` hook provides a fast way to access session data from `render-session`. It returns `loading`, `session`, and `error` states. Use this hook when you need a limited set of session values.

```tsx
import React from 'react'
import { useRenderSession } from 'vtex.session-client'

function MyComponent() {
  const { loading, session, error } = useRenderSession()

  if (loading) {
    return <>Session is loading</>
  }

  if (error) {
    return <>Session has errors</>
  }

  console.log({ session })

  return <>Session is ready</>
}

export default MyComponent
```

--------------------------------

### Fetch Specific Session Attributes with useFullSession Variables

Source: https://github.com/vtex-apps/session-client/blob/master/docs/README.md

The `useFullSession` hook can accept a `variables` object with an `items` array. This array should contain strings matching desired attributes within the Session object, allowing you to fetch only specific fields.

```tsx
useFullSession({
  variables: {
    items: ['store.channel', 'store.countryCode']
  }
})
```

--------------------------------

### API Documentation for VTEX Session updateSession Mutation

Source: https://github.com/vtex-apps/session-client/blob/master/docs/session-client-graphql-api.md

This section details the `updateSession` mutation, which allows modifying fields within the `public` namespace of the `vtex_session` cookie. It outlines the required `fields` parameter for updates and the optional `items` parameter to specify returned session data. The mutation returns a `Session` union, which can be either `SessionError` or `SessionSuccess`.

```APIDOC
Mutation:
  updateSession(fields: SessionFieldsJSONInput!, items: [String]): Session
    Description: Updates fields in the `public` namespace of the `vtex_session` cookie and returns the updated content. The `Session` union has two possible types: `SessionError` and `SessionSuccess`.
    Parameters:
      fields: SessionFieldsJSONInput!
        Description: A JSON object with the public fields to be updated. Since this is equivalent to a PATCH request, the request will have the following behavior with this field: Fields that exist in the cookie and aren't declared in this field will not be changed. Fields that exist in the cookie and are declared in this field will have their values updated. Fields that don't exist in the cookie and are declared in this field will be created.
        Example: { "foo": 123, "baz": "abc" }
      items: [String]
        Description: Specifies the items from the `vtex_session` cookie that will be returned in the response. Each string defines the namespace and value of the items. If this argument isn't declared, the response will have all the items in the `namespace` field.
        Example: ["store.channel", "store.countryCode", "impersonate.canImpersonate"]
        Tip: To only show the updated fields in the response, use the `public` namespace along with the field name. Example: ["public.supportedLocales"]
```

--------------------------------

### API Schema for VTEX SessionError

Source: https://github.com/vtex-apps/session-client/blob/master/docs/session-client-graphql-api.md

This schema defines the structure of the `SessionError` object, which is returned when an `updateSession` mutation encounters an error. It includes fields for the `type` of error and a descriptive `message`.

```APIDOC
SessionError:
  type: String
    Description: Session error type.
  message: String
    Description: Session error message.
```

--------------------------------

### Session API Data Types

Source: https://github.com/vtex-apps/session-client/blob/master/docs/session-client-graphql-api.md

Defines the data structures returned by session operations. `SessionError` is returned upon an error, providing type and message. `SessionSuccess` is returned on success, containing the session cookie content.

```APIDOC
SessionError:
  Description: Returned when a session error occurs. It provides the error type and message.

SessionSuccess:
  Description: Returned when the operation succeeds. It includes the content of the session cookie.
```

--------------------------------

### GraphQL Mutation: Change Current User Session (`updateSession`)

Source: https://github.com/vtex-apps/session-client/blob/master/docs/README.md

The `updateSession` GraphQL mutation allows modifying the current user session. It requires a `fields` input of type `SessionFieldsJSONInput!` to specify the session attributes to update. Optionally, an `items` array can be provided to fetch specific session attributes after the update. The mutation returns `SessionSuccess` or `SessionError`.

```graphql
mutation updateSession($fields: SessionFieldsJSONInput!, $items: [String]) {
  updateSession(fields: $fields, items: $items)
    @context(provider: "vtex.session-client") {
    ... on SessionSuccess {
      id
      namespaces
    }
    ... on SessionError {
      type
      message
    }
  }
}
```

--------------------------------

### React Hook: Update Session with Page Reload (`useUpdateSession`)

Source: https://github.com/vtex-apps/session-client/blob/master/docs/README.md

The `useUpdateSession` hook updates session values and reloads the page to ensure all data reflects the new session parameters. It uses React Apollo's `useMutation` internally but only returns the mutation function, not the result. This is useful for pages where content depends on session values, such as search results.

```tsx
import React from 'react'
import { useUpdateSession } from 'vtex.session-client'

function MyComponent() {
  const updateSession = useUpdateSession()

  return (
    <button
      onClick={() =>
        updateSession({
          variables: {
            fields: { foo: 'bar', baz: 123 },
          },
        })
      }
    >
      Update session
    </button>
  )
}

export default MyComponent
```

--------------------------------

### React Hook: Update Session Without Page Reload (`useUpdateSessionInline`)

Source: https://github.com/vtex-apps/session-client/blob/master/docs/README.md

The `useUpdateSessionInline` hook updates session values without triggering a page reload, unlike `useUpdateSession`. It also leverages React Apollo's `useMutation` and provides the mutation function along with the updated session result. It can optionally fetch specific session attributes using the `items` variable.

```tsx
import React from 'react'
import { useUpdateSessionInline } from 'vtex.session-client'

function MyComponent() {
  const [updateSession, updatedSession] = useUpdateSessionInline()

  console.log({ updatedSession })

  return (
    <button
      onClick={() =>
        updateSession({
          variables: {
            fields: { foo: 'bar', baz: 123 },
          },
        })
      }
    >
      Update session
    </button>
  )
}

export default MyComponent
```

```tsx
updateSession({
  variables: {
    fields: { foo: 'bar', baz: 123 },
    items: ['store.channel', 'store.countryCode']
  }
})
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.