Внешние вызовы API GraphQL никогда не были проще!

Node.js GraphQL

屏幕快照 2018-01-29 上午2.45.30.png

GraphQL — это и язык запросов для API, и среда выполнения, которая удовлетворяет вашим запросам данных. GraphQL предоставляет полное и простое для понимания описание данных в вашем API, позволяя клиентам получать именно те данные, которые им нужны, без какой-либо избыточности.

GraphQL имеет серверные реализации для разных языков, чтобы помочь разработчикам создаватьGraphQL Server.

а такжеgq-loaderЯвляетсяwebpackПлагин, вы можете думать об этом как о своего рода интерфейсном проектеclientОн разработан, чтобы облегчить интерфейсным разработчикам вызов GraphQL API, что делает использование GraphQL более удобным для внешних разработчиков, как и обычныхjsтак же просто, как модули, что позволяет разработчикам переднего планаjsчерез файлimportилиrequireимпорт.gqlа также.graphqlфайл, а затем вызвать напрямую. а также поддерживает#importСинтаксис импорта другой.gqlфайлы, такие как фрагменты.

#importТакже предоставляются два псевдонима, а именно#requireа также#include, два псевдонима и#importИспользование и поведение точно такие же.

Следуйте или используйте gq-loader, посетите GitHub:GitHub.com/Houfeng/Past-…

Чтобы узнать больше или использовать graphql, пожалуйста, пойдитеGitHub.com/Facebook/личные…

Установить

npm install gq-loader --save-dev

или

yarn add gq-loader

основное использование

Как и другие загрузчики, во-первых, мыwebpack.config.jsдобавлено вgq-loaderКонфигурация

{
  test: /\.(graphql|gql)$/,
  exclude: /node_modules/,
  use: {
    loader: 'gq-loader'
    options: {
      url: 'Graphql Server URL'
    }
  }
}

Тогда мы можемjsчерез файлimportимпортировать.gqlФайл использует его, возьмем простой пример, предположим, что уже есть рабочийGraphql Server, затем мы сначала создаем пользователя запросаgetUser.gql

#import './fragment.gql' 

query MyQuery($name: String) {
  getUser(name: $name)
    ...userFields
  }
}

Видно, что мы проходим#importпроцитировал другой.gqlдокументfragment.gql, в этом файле мы описываем возвращаемую информацию о поле пользователя, чтобы мы могли "переиспользовать" его в разных местах, мы также создаем этот файл

fragment userFields on User {
  name
  age
}

Ну, мы можемjsИмпорт прямо из файлаgetUser.gql, и опрашивать пользователей с его помощью никогда не было так просто, давайте посмотрим

import getUser from './getUser.gql';
import React from 'react';
import ReactDOM from 'react-dom';

async function query() {
  const user = await getUser({ name: 'bob' });
  console.log('user', user);
}

function App() {
  return <button onClick={query}>click</button>;
}

ReactDOM.render(<App />, document.getElementById('root'));

вызовgetUserКогда , мы можем задать параметр функции дляGraphQLПередайте переменные, которые являются параметрами нашего запроса.

индивидуальный запрос

По умолчаниюgq-loaderпоможет тебе закончитьgraphql 请求, но в некоторых случаях вы можете захотеть контролировать все запросы самостоятельно, если есть такая необходимость, мы также можем передатьrequestсвойства для "кастомизации" запроса, смотрите на примере, нужно сначала его немного изменитьloader 配置

{
  test: /\.(graphql|gql)$/,
  exclude: /node_modules/,
  use: {
    loader: 'gq-loader'
    options: {
      url: 'Graphql Server URL',
      //指定自动请求模块路径
      request: require.resolve('your_request_module_path');
    }
  }
}

существуетyour_request_module_pathЗаполните путь к пользовательскому модулю запроса,gq-loaderСоответствующий модуль запроса будет автоматически загружен и использован. Модулю нужно только изменить «функцию запроса», см. следующий пользовательский пример.

const $ = require('jquery');

//url 是要请求的 GraphQL 服务地址
//data 是待发送的数据
//options 是自定义选项
module.exports = function(url, data, options){
  //如果有需要还可以处理 options
  return $.post(url, data);
};

в,optionsимпорт.gqlПосле файла "второй параметр функции", например, можно передать такoptionsпараметр

import getUser from './getUser.gql';

async function query() {
  const options = {...};
  const user = await getUser({ name: 'bob' }, options);
  console.log('user', user);
}

полные варианты

имя иллюстрировать По умолчанию
URL Укажите URL службы graphql /graphql
request функция пользовательского запроса Используйте встроенные модули
extensions Расширение по умолчанию, когда расширение опущено при импорте, оно будет искаться по порядку по конфигурации .gql/.graphql
string Указывает режим импорта, когда истинный импорт представляет собой строки, а не исполняемые функции. false

Уведомление,gq-loaderизextensionsНезависимо от того, какое значение настроено, вjsсерединаimportрасширение нельзя опускать, эта опция работает только.gqlдокументimportразное.gqlдокумент

Категории