Исследуйте GraphQL с помощью Apollo & React: создайте базу данных супергероев

Собираем все вместе

Чтобы завершить работу нашего сервера Apollo, нам просто нужно создать новый экземпляр и начать прослушивать соединения:

 user

Здесь мы отправляем конструктору const server = new ApolloServer({
typeDefs,
resolvers,
});

server.listen().then(({ url }) => {
console.log(`Apollo server started at ${url}`)
});
Все, что нужно, это запустить сервер, но сначала вот как должен выглядеть ваш ApolloServer

 index.js

const { ApolloServer, gql } = require('apollo-server');

// This will be our GraphQL schema
const typeDefs = gql`
type User {
id: ID!
name: String
superpowers: [Superpower]!
}

type Superpower {
id: ID!
text: String
}

type Query {
users: [User]
user(id: ID!): User
}
`;

// This will be our mock data to query
const users = [{
id: ‘1’,
name: ‘Peter Parker’,
superpowers: [{
id: ‘1’,
text: ‘Web slinging’
},{
id: ‘2’,
text: ‘Spidey sense’
}]
},{
id: ‘2’,
name: ‘Tony Stark’,
superpowers: [{
id: ‘3’,
text: ‘Industrial design’
},{
id: ‘4’,
text: ‘Robotic fashion’
}]
}];

// This will be a map of functions to return the data described by our schema
const resolvers = {
Query: {
users: () => {
return users
},
user: (root, { id }) => {
return users.find(user => user.id === id);
},
},
};

const server = new ApolloServer({
typeDefs,
resolvers,
});

server.listen().then(({ url }) => {
console.log(`Apollo server started at ${url}`)
});
node index.jshttp://localhost:4000/

Вас должна приветствовать игровая площадка GraphQL, которая позволяет вам пробовать интерактивные запросы к созданной вами схеме.

Собираюсь на практике

Давайте проверим это, введя этот запрос в левой панели:

 query {
  user(id: 1) {
    name
  }
}

Здесь мы используем useridname Результат в левой панели — после нажатия кнопки «play-like» — должен выглядеть следующим образом:

 {
  "data": {
    "user": {
      "name": "Peter Parker"
    }
  }
}

Допустим, вы тоже хотите взглянуть на его суперспособности. Все, что вам нужно сделать, это запросить это поле:

 query {
  user(id: 1) {
    name,
    superpowers {
      text
    }
  }
}

Мы добавили поле superpowers Результат теперь должен отображать каждую сверхдержаву для нашего первого пользователя:

 {
  "data": {
    "user": {
      "name": "Peter Parker",
      "superpowers": [
        {
          "text": "Web slinging"
        },
        {
          "text": "Spidey sense"
        }
      ]
    }
  }
}

Скажем, мы хотим захватить всех пользователей и их суперспособности, мы можем положиться на запрос users

 query {
  users {
    id,
    name,
    superpowers {
      text
    }
  }
}

И результат:

 {
  "data": {
    "users": [
      {
        "id": "1",
        "name": "Peter Parker",
        "superpowers": [
          {
            "text": "Web slinging"
          },
          {
            "text": "Spidey sense"
          }
        ]
      },
      {
        "id": "2",
        "name": "Tony Stark",
        "superpowers": [
          {
            "text": "Industrial design"
          },
          {
            "text": "Robotic fashion"
          }
        ]
      }
    ]
  }
}

Забота только о сверхдержавах? Мы можем сделать это тоже:

 query {
  users {
    superpowers {
      text
    }
  }
}

И вы получите:

 {
  "data": {
    "users": [
      {
        "superpowers": [
          {
            "text": "Web slinging"
          },
          {
            "text": "Spidey sense"
          }
        ]
      },
      {
        "superpowers": [
          {
            "text": "Industrial design"
          },
          {
            "text": "Robotic fashion"
          }
        ]
      }
    ]
  }
}

На этом этапе вы сможете оценить высочайшую гибкость и привлекательность GraphQL. С помощью одного запроса и соединения мы можем получить любой фрагмент данных, который нам нужен. Все, что необходимо, — это хорошо разработанная схема и средства разрешения для ее поддержки.

 npm install -g create-react-app
create-react-app my-graphql
cd my-graphql
npm install apollo-boost react-apollo graphql

 import React from 'react'
import ReactDOM from 'react-dom'
import { ApolloClient } from 'apollo-client'
import { HttpLink } from 'apollo-link-http'
import { InMemoryCache } from 'apollo-cache-inmemory'
import { ApolloProvider } from 'react-apollo'

import App from './App'

const client = new ApolloClient({
    link: new HttpLink({ uri: 'http://localhost:4000/graphql' }),
    cache: new InMemoryCache()
})

ReactDOM.render(
    <ApolloProvider client={client}>
    <App />
    </ApolloProvider>,
    document.getElementById('root')
)

 import React from 'react'
import { Query } from 'react-apollo'
import { gql } from 'apollo-boost'

const TEST_QUERY = gql`
  {
    user(id: 1) {
      id,
      name,
      superpowers {
        text
      }

  }}
`;

const App = () => (
  <Query query={TEST_QUERY}>
  {({ data: { user }, loading }) => {
      if (loading || !user) {
        return <div>Loading ...</div>;
      }
      return (
    <p>
        {user.name} ({user.id}) has the following superpowers:
        <ul>
        {user.superpowers.map(superpower => (
            <li>
                {superpower.text}
            </li>
        ))}
        </ul>
    </p>
      );
    }}
  </Query>
);

export default App