플래시 메모리에서 0에서 서버가 없는 GraphQL 노드

서버 GraphQL이 없습니다.

이 두 단어의 조합은 당신의 유행어 검출기를 일으킬 수 있습니까?
그럼 어렵겠죠?
그게 아니라고 말해줄게!
우리는 이 블로그에서 a serverless GraphQL endpoint 을 만들 것이다. 나는 이것이 네가 상상한 것보다 쉽다고 보증한다.

준비

우리는 GraphQL 끝점Netlify을 호스팅합니다.
그것들은 위탁 관리 사이트를 신속하고 아프지 않게 한다.그것들은 또한 서버 기능이 없는 방법을 제공했는데, 이것이 바로 우리가 진정으로 흥미를 느끼는 것이다.이 기능들은 AWS Lambda 에 배치될 것이지만, 어떻게 실현할지 걱정할 필요가 없습니다. Netlify가 당신을 위해 완성할 것입니다.
먼저 설치Netlify CLI tool

npm install netlify-cli -g

이 새롭고 좋은 프로젝트를 위한 새 디렉터리를 만들고 바쁜 초기 설정을 합니다.

git init
npm init -y

Netlify가 코드 업데이트를 발표할 때마다 자동으로 배포할 수 있도록 GitHub 에 저장소를 만들 수 있습니다.

netlify login
netlify init

새 사이트 만들기 및 구성 옵션을 선택하고 다른 옵션을 입력하여 기본 설정을 선택합니다.
.gitignore 파일, netlify.toml 파일 및 .netlify 폴더를 만듭니다.netlify.toml Netlify 사이트에 대한 구성을 저장합니다.
거기서 너는 functions = "functions"선을 볼 수 있을 것이다."functions" 서버 기능 없이 AWS Lambda 에 배포되는 경로
사이트에 액세스할 때 내용을 표시하기 위해 index.html 파일을 만듭니다.
현재, 당신은 기능이 정상적인 사이트를 가지고 있습니다. 우리는 첫 번째 서버 기능이 없는 사이트를 추가합니다.

첫 번째 서버 기능 없음

functions 폴더를 만들거나 netlify.toml 에서 경로를 변경한 폴더를 만듭니다.
여기에 있는 모든 파일.js은 서버 함수가 없습니다.
파일 이름도 서버 함수가 없는 이름이 됩니다.
그들은 /.netlify/functions/{function_name}를 통해 들어갈 것이다
모든 파일은 handler 함수를 내보내야 합니다.

exports.handler = function(event, context, callback) {
  // Hey, I'm lighter than a server, I'm server~~less~~ 🥁💥
};

callback 매개 변수를 사용하여 함수의 오류나 응답을 되돌려줍니다.functions 디렉토리에 hello.js 파일을 생성합니다.

exports.handler = (event, context, callback) => {
  const response = {
    statusCode: 200,
    body: JSON.stringify({
      msg: `Mr. Mime is the best Pokemon`
    })
  };
  callback(undefined, response);
};

너는 여기서 포켓몬을 하나 더 고를 수 있지만, 너는 틀렸다🤷‍♂
실행 netlify dev 은 실행 상황을 볼 수 있습니다

netlify dev

URL 열기 및 이동 /.netlify/functions/hello🎉 타다, 대답이 있어.

단일 파일을 사용하는 서버 없는 GraphQL

서버가 없는 또 다른 함수를 만들 때가 되었습니다. 이것도 본고의 이유입니다. GraphQL 단점입니다!
우리는 apollo-server-lambda 소프트웨어 패키지를 사용할 것이다.

npm install apollo-server-lambda

이 패키지의 코드를git에 제출하지 않도록 node_modules 폴더를 .gitignore 에 추가하는 것을 잊지 마십시오.functions 디렉토리에 graphql.js 파일을 생성합니다.
네가 필요로 하는 것을 가져오는 것부터 시작해라.

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

GraphQL 서버의 대부분은 파일에 있습니다.
모드(또는 typeDefs) 및 해상도.
모드는 실행할 수 있는 작업과 사용할 데이터의 외관을 정의합니다.
분해기는 이 조작을 어떻게 완성하는지 정의하는 함수입니다.

니키 메르만
@nmeuleman 회사

👋 저는 GraphQL을 어떻게 이해합니까, 너무 단순화: Typedefs: 네?🤡분해기: 어때요?😀+💅
20:2019년 8월 19일 오후 53시
0
삼.
따라서 이 두 부분은 반드시 동기화되어야 한다.만약 없다면, apollo 서버가 당신에게 소리를 질렀을 것입니다. GraphQL 노드가 작동하지 않을 것입니다!
모델에 대한 더 많은 정보는 아폴로가 그들의 강좌a great schema step에 있다. 이것이 바로 우리가 여기서 해야 할 일이다. 단지 이번에 우리가 사용한 것은 서버가 없고 그 문서들은'구식'서버를 사용했다.

const typeDefs = gql`
  type Query {
    hello: String!
  }
`;

최소한의 모드를 완성한 후에 해상도를 계속 사용할 때가 되었다!
분해기는 다음과 같은 서명을 가진 함수이다

fieldName(obj, args, context, info) { result }

해상도에 대한 더 많은 정보the apollo docs는 풍부한 정보를 가지고 있다.
이 graphql.js 파일에서 resolvers 이라는 대상을 정의합니다. 이 대상은 당신의 패턴에 대응합니다.
이 예에서는 Query 키 아래의 단일 함수를 의미합니다.
모드 호출 hello 형식을 결과로 삼았기 때문에 이것이 바로 우리가 해상도에서 되돌아올 내용이다.

const resolvers = {
  Query: {
    hello: (obj, args, context) => {
      return 'Hello, world!';
    }
  }
};

너무 좋아요.이 파일에는 현재 2개의 변수가 포함되어 있지만 사용되지 않습니다.
여기서 방금 생성한 변수를 파일 맨 위에 string 에서 가져온 ApolloServer 으로 입력합니다.
설명을 쉽게 하려면 apollo-server-lambda 를 추가하여 열고 playground: true, introspection: true 에 액세스할 때 유용한 내용을 볼 수 있도록 하십시오.

const server = new ApolloServer({
  typeDefs,
  resolvers,
  playground: true,
  introspection: true
});

얼마 안 남았어요.우리의 서버 없는 함수를 어떻게 내보내야 하는지 기억나십니까/.netlify/functions/graphql?
고맙습니다. handler 에서 이 점을 해 드릴 수 있는 편리한 방법이 있습니다.

exports.handler = server.createHandler();

이륙 준비🚀.
실행server 및 액세스netlify dev를 사용하여 방금 이 URL에서 생성한 서버 없음 GraphQL 노드와 상호 작용합니다!
GraphQL playground

GraphQL 끝점 확장

쿼리만 할 수 있습니다/.netlify/functions/graphql. 그리고 쿼리는 항상 같은 문자열을 되돌려줍니다. 심심합니다. 포켓몬을 추가하겠습니다.

구조

패턴이 지금 그럴 수도 있어요.

const typeDefs = gql`
  type Query {
    hello: String!
    allPokemon: [Pokemon]!
    pokemonById(id: Int!): Pokemon
    pokemonByName(name: String!): Pokemon
  }
  type Mutation {
    createPokemon(id: Int!, name: String!, isVeryBest: Boolean!): Pokemon
    deletePokemon(id: Int!): Pokemon
    updatePokemon(id: Int!, name: String, isVeryBest: Boolean): Pokemon
  }
  type Pokemon {
    id: ID!
    name: String!
    isVeryBest: Boolean!
  }
`;

hello 아래에서 요청할 수 있는 필드뿐만 아니라 Query 키 아래에서 실행할 수 있는 동작을 나타내는 필드와 단일Mutation 데이터 형식도 정의했습니다.
자세한 내용은 을 참조하십시오.자세한 내용은 those apollo schema docs 을 참조하십시오.

공식 GraphQL 모드 문서 데이터베이스

우리가 하고 싶은 일을 지원하기 위해서는 데이터베이스가 필요합니다!
간단하게 보기 위해 파일에 JavaScript 배열을 추가합니다.

// I know the plural is Pokemon, don't judge me
const pokemons = [
  { id: 122, name: 'Mr. Mime', isVeryBest: true },
  { id: 25, name: 'Pikachu', isVeryBest: false },
  { id: 7, name: 'Squirtle', isVeryBest: false }
];

해상도

우리의 해상도는 우리의 패턴과 일치해야 하기 때문에 파일의 일부분은 지금 이렇게 보인다.

const resolvers = {
  Query: {
    hello: (obj, args, context) => {
      return 'Hello, world!';
    },
    allPokemon: (obj, args, context) => {
      return pokemons;
    },
    pokemonById: (obj, args, context) => {
      return pokemons.find(pokemon => pokemon.id === args.id);
    },
    pokemonByName: (obj, args, context) => {
      return pokemons.find(pokemon => pokemon.name === args.name);
    }
  },
  Mutation: {
    createPokemon: (obj, args, context) => {
      const pokemon = {
        id: args.id,
        name: args.name,
        isVeryBest: args.isVeryBest
      };
      pokemons.push(pokemon);
      return pokemon;
    },
    updatePokemon: (obj, args, context) => {
      const pokemon = pokemons.find(pokemon => pokemon.id === args.id);
      if (args.name) pokemon.name = args.name;
      if (args.isVeryBest) pokemon.isVeryBest = args.isVeryBest;
      return pokemon;
    },
    deletePokemon: (obj, args, context) => {
      const index = pokemons.findIndex(pokemon => pokemon.id === args.id);
      const pokemon = pokemons[index];
      pokemons.splice(index, 1);
      return pokemon;
    }
  }
};

컨텐트 추가 시도

Pokemon를 실행하고 GraphQL 운동장을 다시 방문하면 더욱 충실한 GraphQL 노드와 상호작용할 수 있습니다.

하이테크 데이터베이스는 JavaScript 수조이기 때문에 서버 기능이 없으면 닫고 다시 시작할 때 변경 사항이 사라진다는 것을 기억하십시오!

결론

이것은 나를 매우 흥분시켰다. 그래서 나는 에서 그것을 사용했다. 이것은 기본적으로 통제력을 잃은 우스갯소리이다.
그것은 a sideproject 와 대화하는 서버 없는 GraphQL 단점을 가지고 있으며, FaunaDB 로 작성하고, 작은 TypeScript 전단을 가지고 있다.

니키 메르만
@nmeuleman 회사

제이슨이라는 사람이 JSON을 언급했을 때 재미있었어요?📣 Jason APIGatsby를 소개합니다. 이것은 Jasons에 대한 서버 없는 GraphQL API입니다!이것이 바로 당신이 쿨한 기술을 탐색하고 어리석은 농담과 결합시킬 때 발생하는 일이다.
16:2019년 10월 4일 오후 56시
사.
이십
본고의 다음 부분에서 우리는 여러 개의 파일을 사용하여 GraphQL 단점을 만들고 데이터베이스를 jason-api.netlify.com 로 바꾸는 방법을 탐색할 것이다.
잠행 피크값에 대해 예시 코드를 마음대로 보십시오.

FaunaDB/ 닉 메르만

서버 GraphQL 노드 없음