Conectando a um serviço

This content was migrated from the VTEX Learning Center and is no longer being actively maintained. For the most accurate and up-to-date information, please check the official documentation.

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

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

/manifest.json


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

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

/graphql/schema.graphql


_10type Query {
_10  helloworld: String
_10}

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

/node/index.ts


_11import { Service } from '@vtex/api'
_11
_11export default new Service({
_11  graphql: {
_11    resolvers: {
_11      Query: {
_11        helloworld: () => `Service number: ${Math.random()}`,
_11      },
_11    },
_11  },
_11})

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

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

/node/package.json


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

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:


_10query hello {
_10  helloworld
_10}

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


_20import React, { FC } from 'react'
_20import { Layout, PageBlock } from 'vtex.styleguide'
_20+import { useQuery } from 'react-apollo'
_20
_20+import helloworld from './graphql/helloworld.gql'
_20
_20const AdminExample: FC = () => {
_20+ const { data } = useQuery(helloworld)
_20
_20  return (
_20    <Layout>
_20      <PageBlock title="Titulo" subtitle="Alguma explicação." variation="full">
_20        <h1>Hello, World!</h1>
_20+       <p>{data?.helloworld}</p>
_20      </PageBlock>
_20    </Layout>
_20  )
_20}
_20
_20export default AdminExample

O resultado deve ser:

{"base64":" ","img":{"width":898,"height":630,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":37073,"url":"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 🚀).

Answer sheet

See answer sheet for adminExample.tsx

adminExample.tsx


_20import React, { FC } from 'react'
_20import { Layout, PageBlock } from 'vtex.styleguide'
_20import { useQuery } from 'react-apollo'
_20
_20import helloworld from './graphql/helloworld.gql'
_20
_20const AdminExample: FC = () => {
_20  const { data } = useQuery(helloworld)
_20
_20  return (
_20    <Layout>
_20      <PageBlock title="Titulo" subtitle="Alguma explicação." variation="full">
_20        <h1>Hello, World!</h1>
_20        <p>{data?.helloworld}</p>
_20      </PageBlock>
_20    </Layout>
_20  )
_20}
_20
_20export default AdminExample

See answer sheet for helloworld.gql

helloworld.gql


_10query hello {
_10  helloworld
_10}

See answer sheet for index.ts

index.ts


_11import { Service } from '@vtex/api'
_11
_11export default new Service({
_11  graphql: {
_11    resolvers: {
_11      Query: {
_11        helloworld: () => `Service number: ${Math.random()}`,
_11      },
_11    },
_11  },
_11})

See answer sheet for manifest.json

manifest.json


_21{
_21  "vendor": "appliancetheme",
_21  "name": "admin-sandbox",
_21  "version": "0.0.0",
_21  "title": "Admin Sandbox",
_21  "description": "Admin Sandbox",
_21  "builders": {
_21    "react": "3.x",
_21    "messages": "1.x",
_21    "docs": "0.x",
_21    "admin": "0.x",
_21    "node": "6.x",
_21    "graphql": "1.x"
_21  },
_21  "dependencies": {
_21    "vtex.styleguide": "9.x"
_21  },
_21  "registries": ["smartcheckout"],
_21  "policies": [],
_21  "$schema": "https://raw.githubusercontent.com/vtex/node-vtex-api/master/gen/manifest.schema"
_21}

See answer sheet for package.json

package.json


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

See answer sheet for schema.graphql

schema.graphql


_10type Query {
_10  helloworld: String
_10}