---
updatedAt: 2025-05-08T20:50:35.000Z
agentTools:
  projectIndex: https://learn.vtex.com/llms.txt
---

# Conectando a um Serviço

````mdx
<HTMLBlock>{`
<style>
      section#hub-content header h1, section#hub-content header h2 {
        color: #f71963
      }
    
      p {
        line-height: 1.5rem;
      }
    </style>
`}</HTMLBlock>

# Conectando a um serviço

## Introdução

Uma app de admin acaba perdendo o seu sentido se não puder consumir dados. Sendo assim, no último passo do curso, vamos aprender como conectar sua app de admin a um serviço e, em seguida, usá-lo no *front-end* da aplicação.

## Atividade

1. Comece adicionando os *builders* para serviço necessários:

/manifest.json

```diff
{
  ...
  "builders": {
    "react": "3.x",
    "messages": "1.x",
    "docs": "0.x",
    "admin": "0.x",
+   "node": "6.x",
+   "graphql": "1.x"
  }
}

````

2. Crie uma pasta `graphql/` e adicione um arquivo simples `schema.graphql` com uma única query:

/graphql/schema.graphql

```
type Query {
  helloworld: String
}
```

3. Crie uma pasta `node/` e nela adicione um `index.ts` que vai instanciar nosso serviço:

/node/index.ts

```
import { Service } from '@vtex/api'

export default new Service({
  graphql: {
    resolvers: {
      Query: {
        helloworld: () => `Service number: ${Math.random()}`,
      },
    },
  },
})
```

Nosso serviço vai então, na query `helloworld` retornar um número aleatório.

4. Na pasta `/node` para que você consiga desenvolver bem localmente, será necessário um `package.json`, você pode adicionar um simples:

/node/package.json

```
{
  "dependencies": {
    "co-body": "^6.0.0",
    "ramda": "^0.25.0"
  },
  "devDependencies": {
    "@types/co-body": "^0.0.3",
    "@types/jest": "^24.0.18",
    "@types/node": "^12.0.0",
    "@types/ramda": "types/npm-ramda#dist",
    "@vtex/api": "6.36.2",
    "@vtex/test-tools": "^1.0.0",
    "tslint": "^5.14.0",
    "tslint-config-vtex": "^2.1.0",
    "typescript": "3.8.3"
  },
  "scripts": {
    "lint": "tsc --noEmit --pretty && tslint -c tslint.json --fix './**/*.ts'"
  },
  "version": "0.0.7"
}

```

5. Na pasta `react/` nós vamos precisar definir uma *query* para conseguir usar o resolver que definimos no serviço. Para fazer isso, crie uma pasta `graphql/` dentro da pasta `react/` e nesta pasta, crie um `helloworld.gql` com:

/react/graphql/helloworld.gql:

```
query hello {
  helloworld
}
```

6. Para finalizar, precisamos adicionar essa *query* ao nosso componente no `adminExample.ts`

```diff
import React, { FC } from 'react'
import { Layout, PageBlock } from 'vtex.styleguide'
+import { useQuery } from 'react-apollo'

+import helloworld from './graphql/helloworld.gql'

const AdminExample: FC = () => {
+ const { data } = useQuery(helloworld)

  return (
    <Layout>
      <PageBlock title="Titulo" subtitle="Alguma explicação." variation="full">
        <h1>Hello, World!</h1>
+       <p>{data?.helloworld}</p>
      </PageBlock>
    </Layout>
  )
}

export default AdminExample
```

O resultado deve ser:

![image](https://user-images.githubusercontent.com/18701182/92937440-b79f7400-f421-11ea-9e92-a24ef710e83e.png)

Com isto você tem um serviço conectado à sua aplicação de admin e pode, agora, conectar a serviços externos (aprenda mais sobre no nosso curso de serviços 🚀).

### Está com dúvidas?

Veja o [gabarito para esta etapa](https://learn.vtex.com/docs/course-admin-step06-connecting-to-service-answersheet-lang-pt) ou acompanhe nosso \[office hours] no canal VTEX Developers(<https://www.youtube.com/c/VTEXDevelopers>)

<HTMLBlock>{`
<div id="finished-course">
  <div class="finish-elems"><b class="rebelPink">Parabéns</b>, você terminou o curso!</div>
  <img class="finish-elems" src="https://media.giphy.com/media/g9582DNuQppxC/giphy.gif"/>
  
  <div class="finish-elems">Ainda tem tempo sobrando?</div>
  <a class="finish-elems" href=course-admin-challenge-lang-pt>Tenta nosso desafio para este curso!</a>

</div>
`}</HTMLBlock>

<HTMLBlock>{`
<div id="finish-course">
  <a id="finish-link" href="/page/learning-path-lang-pt">Finalizar Curso</a>
</div>
`}</HTMLBlock>

<hr />
<div id="contribute-container">
  <p id="contribute-title"> 
    Ajude-nos a fazer este conteúdo melhor!
  </p>
  <p id="contribute-description">
    Os cursos do VTEX IO são de código aberto. Se você perceber algum problema, pode abrir um pull request!
  </p>

  <a id="contribute-button" href="https://github.com/vtex/vtex-courses/edit/master/courses/admin/steps/06-connecting-to-service/pt.md">
    Faça uma contribuição
  </a>

  <p id="contribute-issue">
    ou <a href="https://github.com/vtex/vtex-courses/issues/new/choose">abra uma issue</a>
  </p>

</div>
```