Как настроить конечную точку Apollo GraphQL для локального IP при разработке? - PullRequest
Новая
       12

Как настроить конечную точку Apollo GraphQL для локального IP при разработке?

0 голосов
/ 19 января 2019

Я разрабатываю интерфейс React с Node / Express, используя клиент и сервер Apollo. Веб-интерфейс был создан с использованием create-react-app.

На своем веб-интерфейсе я добавил конечную точку GraphQL, используя HttpLink из apollo-boost как таковое: 

const httpLink = new HttpLink({ uri: 'http://localhost:8080/graphql' })

Это нормально при локальной разработке, однако, если я хочу протестировать веб-сайт (и косвенно конечную точку GraphQL) на другом устройстве - весь контент GraphQL не загружается, поскольку конечная точка не существует на локальном хосте устройство.

Для борьбы с этим я добавил следующее: 

const httpLink = new HttpLink({
  uri:
    process.env.NODE_ENV === 'development'
      ? 'http://192.168.1.25:8080/graphql'
      : 'https://example.com/graphql'
})

Это хорошо работает, но я занимаюсь разработкой на двух разных машинах. Таким образом, локальный IP, который обслуживает конечную точку GraphQL, не зафиксирован на 192.168.1.25.

Затем я искал npm и нашел internal-ip. Я подумал, что могу просто импортировать internal-ip и превратить вышеприведенное в строку шаблона следующим образом: 

const httpLink = new HttpLink({
  uri:
    process.env.NODE_ENV === 'development'
      ? `http://${internalIp.v4.sync()}:8080/graphql`
      : 'https://example.com/graphql'
})

Однако при запуске через веб-пакет internalIp.v4.sync() оценивается как null.

Как лучше всего динамически устанавливать локальную конечную точку IP при работе с React и веб-пакетом, как описано в приведенной выше проблеме? В частности без запуска npm eject?

Ответы [ 2 ]

0 голосов
/ 20 января 2019

Я определенно предложу использовать .ngrok, как уже предложено @ Daniel

1. Используйте .ngrok, чтобы показать конечную точку вашего локального сервера.Вы получите общедоступный URL-адрес сервера, который вы можете использовать из любого места в Интернете

2.Вы можете создать файл .env.development.local с переменной env.

Для получения дополнительной информации о файлах env в Приоритет создания приложения React см. ссылка

например

REACT_APP_SERVER_URL = http://192.168.1.25:8080/graphql

// Или URL-адрес, указанный ngrok

3.Используйте SERVER_URL из файла .env без извлечения

const httpLink = new HttpLink ({uri: REACT_APP_SERVER_URL}) *

0 голосов
/ 19 января 2019

Это похоже на библиотеку узлов, поэтому она не будет работать внутри вашего кода внешнего интерфейса. Если вы используете веб-пакет, вы можете использовать DefinePlugin , чтобы оценить некоторое выражение, а затем установить для него глобальную переменную, которая будет доступна в любом месте вашего кода внешнего интерфейса.

Вы также можете использовать такой инструмент, как ngrok , чтобы предоставить общедоступный URL-адрес для локальной среды разработки. 

// webpack.config.js
new webpack.DefinePlugin({
  SERVER_URL: JSON.stringify(`${internalIp.v4.sync()}/graphql`),
})

// elsewhere
const httpLink = new HttpLink({ uri: SERVER_URL })
...