Next.js — Первая разработка схемы с GraphQL

GraphQL полезен для загрузки данных с сервера на клиент. Он использует GraphQL SDL (язык определения схемы) для связи с сервером. Схема GraphQL представляет тип данных. Когда я разрабатываю клиентское веб-приложение, я использую удаленный сервер для отображения данных на странице. В этом случае, если сервер не работает или у вас нет сети, например, в самолете или в горах, разработка приложения затруднена.

GraphQL определяет строгую схему. Он используется для генерации кода на стороне сервера, генерации кода на стороне клиента или совместного использования в качестве документа. В этой статье я объясню, как использовать GraphQL SDL для запуска фиктивного сервера и разработки клиентского приложения с помощью Schema First Development без какой-либо реальной реализации на стороне сервера.

Схема первой разработки

Почти все клиентские приложения взаимодействуют с сервером. Для связи с сервером необходима схема. В REST API схема или спецификация определяются как текстурированный документ или OpenAPI или что-то в этом роде. Схемы могут быть определены после завершения реализации на стороне сервера. Используя GraphQL, разработчики сначала определяют схему. А после внедряют сервер и клиент.

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

ГрафQL

Существует схема при использовании GraphQL, и она полезна для разработки Schema First. Это позволяет нам начать разработку клиентского приложения до того, как будет реализовано серверное. Для реализации клиентского кода полезен фиктивный сервер. GraphQL имеет схему. Особенность того, что вы можете получить фиктивный сервер из схемы GraphQL.

Я собираюсь объяснить способ разработки клиентского веб-приложения с помощью схемы GraphQL и Next.js. Давайте начнем.

Кодирование

Начнем с create-next-app . create-next-app устанавливает шаблон приложения Next.js. Он устанавливает множество примеров кодов. На этот раз мы начинаем с with-apollo. Запустите эту команду в своем терминале.

npx create-next-app --example with-apollo graphql-next-app

После изменения каталога на graphql-next-app, yarn dev и open http://localhost:3000, чтобы показать пример приложения.

cd graphql-next-app
yarn dev
open http://localhost:3000

Это будет выглядеть так.

Это пример приложения с GraphQL. Он подключается к серверу GraphQL Graphcool для отображения данных. Конечно, это вызывает ошибку, если сетевое соединение недоступно.

Подготовьтесь к схеме

Для создания mock-сервера GraphQL SDL можно скачать с GraphQL Playground от Graphcool.

Поместите файл схемы .graphql в ./schema.graphql .

Создайте фиктивный сервер с помощью Apollo Server.

Apollo Server можно использовать для создания фиктивного сервера. Это очень легко. Ему нужно всего 10 строк кода.

// index.js
const { ApolloServer } = require("apollo-server");
const { makeExecutableSchema } = require("graphql-tools");
const { importSchema } = require("graphql-import");
const typeDefs = importSchema("../schema.graphql");
const schema = makeExecutableSchema({
  typeDefs
});
const server = new ApolloServer({
  schema,
  mocks: {}
});
server.listen().then(({ url }) => {
  console.log(`🚀 Server ready at ${url}`);
});

Это все, что нужно для создания фиктивного сервера. Он создает сервер для возврата правильно типизированных данных с использованием GeaphQL SDL.

В этом случае схема имеет настраиваемое скалярное значение DateTime. Сервер Apollo не знает подходящего значения mock для пользовательского скаляра. Поэтому сообщите им значение DateTime и как вести себя с DateTime для запуска фиктивного сервера.

Чтобы определить поведение пользовательского скалярного типа, вы можете добавить преобразователи, как показано ниже.

const resolvers = {
  DateTime: new GraphQLScalarType({
    name: "DateTime",
    description: "DateTime",
    serialize(data) {
      return data.toISOString();
    },
    parseValue(data) {
      return new Date(data);
    },
    parseLiteral(ast) {
      return new Date(ast.value);
    }
  })
};

Чтобы вернуть фиктивное значение пользовательского скалярного типа, вы можете добавить свойство mocks при передаче аргументов при запуске экземпляра ApolloServer.

const server = new ApolloServer({
  schema,
  mocks: {
    DateTime: () => {
      return new Date(); // It returns current Date for all response.
    }
  }
});

Текущий файл index.js находится здесь.

// https://github.com/kouki-dan/GraphQL-schema-first-next-app/blob/3f4ac80123e461a62797bbc79136b59178c52545/mock/index.js
const { GraphQLScalarType } = require("graphql");
const { ApolloServer } = require("apollo-server");
const { makeExecutableSchema } = require("graphql-tools");
const { importSchema } = require("graphql-import");
const typeDefs = importSchema("../schema.graphql");
const resolvers = {
  DateTime: new GraphQLScalarType({
    name: "DateTime",
    description: "DateTime",
    serialize(data) {
      return data.toISOString();
    },
    parseValue(data) {
      return new Date(data);
    },
    parseLiteral(ast) {
      return new Date(ast.value);
    }
  })
};
const schema = makeExecutableSchema({
  typeDefs,
  resolvers
});
const server = new ApolloServer({
  schema,
  mocks: {
    DateTime: () => {
      return new Date();
    }
  }
});
server.listen().then(({ url }) => {
  console.log(`🚀 Server ready at ${url}`);
});

Поместите файл как ./mock/index.js, а ./mock/package.json требуется только для запуска этого фиктивного сервера.

{
  "name": "mock",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "node index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "apollo-server": "^2.9.13",
    "graphql": "^14.5.8",
    "graphql-import": "^0.7.1"
  }
}

Давайте запустим фиктивный сервер с этими командами.

cd mock
npm install
npm start

Откройте http://localhost:4000/ и вы увидите Playground. Он работает на основе schema.graphql и возвращает фиктивное значение.

Теперь ваш фиктивный каталог выглядит так

kouki-dan/GraphQL-schema-first-next-app
Вы не можете выполнить это действие в данный момент. Вы вошли в другую вкладку или окно. Вы вышли на другой вкладке или…github.com

Использование фиктивного сервера для разработки приложения Next.js.

Теперь вы получаете фиктивный сервер. Давайте используем это в вашем приложении Next.js.

Чтобы запустить фиктивный сервер и приложение Next.js, установите npm-run-all .

yarn add -D npm-run-all

Давайте добавим новый скрипт npm. Модифицированный package.json находится здесь.

...
"scripts": {
    "mock": "npm start --prefix mock",
    "dev-mock": "GRAPHQL_ENDPOINT=\"http://localhost:4000/\" run-p dev mock",
    "dev": "next",
    "build": "next build",
    "start": "next start",
    "postinstall": "npm install --prefix mock"
  },
...

Изменение ismock , добавлены dev-mock и postinstall.

Сценарийmock определяет, как запускать фиктивный сервер, а сценарийdev-mock использует его вместе с сервером Next.js.

Сценарийpostinstall полезен для установки дочернего пакета npm.

next.config.js полезно использовать значение окружения в вашем приложении Next.js.

module.exports = {
  publicRuntimeConfig: {
    graphqlEndpoint: process.env.GRAPHQL_ENDPOINT || "https://api.graph.cool/simple/v1/cixmkt2ul01q00122mksg82pn",
  }
};

Он использует GRAPHQL_ENDPOINT из сред, если они существуют. Измените lib/apollo.js, чтобы использовать это.

function createApolloClient(initialState = {}) {
  // Check out https://github.com/zeit/next.js/pull/4611 if you want to use the AWSAppSyncClient
  const { publicRuntimeConfig } = getConfig();
  return new ApolloClient({
    ssrMode: typeof window === 'undefined', // Disables forceFetch on the server (so queries are only run once)
    link: new HttpLink({
      uri: publicRuntimeConfig.graphqlEndpoint, // Server URL (must be absolute)
      credentials: 'same-origin', // Additional fetch() options like `credentials` or `headers`
      fetch,
    }),
    cache: new InMemoryCache().restore(initialState),
  })
}

Это все. Все изменения здесь.

Добавить новый скрипт dev-mock npm для использования имитации сервера GraphQL в локальной среде ·…
Вы не можете выполнить это действие в настоящее время. Вы вошли в другую вкладку или окно. Вы вышли на другой вкладке или…github.com

Давайте запустим ваше приложение с фиктивным сервером.

npm run dev-mock

Откройте http://localhost:3000

Hello World и 77 возвращаются с фиктивного сервера. Теперь вы можете показать результат, если у вас нет сети.

Если вы хотите подключить настоящий сервер, вы можете использовать npm run dev.

Настройка фиктивного ответа

По умолчанию имитируемое значение представляет собой случайные числа или строковое значение Hello World. Вы можете настроить его легко.

const server = new ApolloServer({
  schema,
  mocks: {
    DateTime: () => {
      return new Date();
    },
    User: () => {
      return {
        firstName: "Kouki",
        lastName: "Saito",
      }
    },
  }
});

В ./mock/index.js модифицируйте аргумент mocks, чтобы настроить их. Он возвращает заданное значение, когда возвращается тип пользователя.

Вывод

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

Это пример репозитория, который описан в этой статье. Я надеюсь, что вы найдете это полезным!