Наши проекты:
Журнал · Discuz!ML · Wiki · DRKB · Помощь проекту |
||
ПРАВИЛА | FAQ | Помощь | Поиск | Участники | Календарь | Избранное | RSS |
[18.217.208.72] |
|
Страницы: (3) 1 [2] 3 все ( Перейти к последнему сообщению ) |
Сообщ.
#16
,
|
|
|
Не совсем. Это как использовать ФС вместо БД. Причём эта аналогия, если подумать и с переносом с сервера на клиент-серверное взаимодействие - похожа на реальность. |
Сообщ.
#17
,
|
|
|
Цитата Serafim @ Не совсем В том плане, что все едино, что для REST нужно читать доку, что для GraphQL - совсем Как не было реальной унификации, так ее и нет. |
Сообщ.
#18
,
|
|
|
Цитата Астарот @ Как не было реальной унификации, так ее и нет. А что есть "реальная" унификация? |
Сообщ.
#19
,
|
|
|
Цитата Serafim @ А что есть "реальная" унификация? Ничто не есть, в том и дело. |
Сообщ.
#20
,
|
|
|
Сообщ.
#21
,
|
|
|
Кстати кто-нибудь юзал или юзит GraphQL + React?
|
Сообщ.
#22
,
|
|
|
Цитата Cfon @ Кстати кто-нибудь юзал или юзит GraphQL + React? Да, у нас на проде в 3х проектах) |
Сообщ.
#23
,
|
|
|
Цитата Serafim @ Цитата Cfon @ Кстати кто-нибудь юзал или юзит GraphQL + React? Да, у нас на проде в 3х проектах) Ок. Я тоже решил не тупить Переделал пример выше с использованием GraphQL Зацените что у меня получилось app.js import React, {Component} from 'react'; import {render} from 'react-dom'; import '../node_modules/bootstrap/dist/css/bootstrap.min.css'; import Menu from './components/menu'; import RecipeForm from './components/recipe-form'; import {v4} from 'uuid'; // import fetch from 'isomorphic-fetch'; class App extends Component { state = { recipes: [] } constructor() { super(); this.doRate = this.doRate.bind(this); this.addRecipe = this.addRecipe.bind(this); } componentWillMount() { // GraphQL query fetch(`/graphql?query={ recipes { id, name, ingredients { name, amount, measurement }, steps, rating } }`) .then(res => res.json()) .then(json => { this.setState(json.data) }) .catch(err => console.error(err)); } ........ render() { const {recipes} = this.state; return ( <div className="container"> <Menu recipes={recipes} onRate={this.doRate}/> <RecipeForm onNewRecipe={this.addRecipe}/> </div> ); } } render( <App/>, document.getElementById('app') ); schema/main.js import { GraphQLSchema, GraphQLObjectType, GraphQLString, GraphQLInt, GraphQLFloat, GraphQLList } from 'graphql'; const IngredientType = new GraphQLObjectType({ name: 'Ingredient', fields: { name: { type: GraphQLString }, amount: { type: GraphQLFloat }, measurement: { type: GraphQLString } } }); const RecipeType = new GraphQLObjectType({ name: 'Recipe', fields: { id: { type: GraphQLInt }, name: { type: GraphQLString }, ingredients: { type: new GraphQLList(IngredientType) }, steps: { type: new GraphQLList(GraphQLString) }, rating: { type: GraphQLInt } } }); const QueryType = new GraphQLObjectType({ name: 'Query', fields: { recipes: { type: new GraphQLList(RecipeType), resolve: (arg1, arg2, {recipes}) => { let res = []; recipes.find((err, results) => { res = [...results]; }); return res; } } } }); export const schema = new GraphQLSchema({ query: QueryType }); server.js import express from 'express'; import logger from 'morgan'; import Bourne from 'bourne'; import graphqlHTTP from 'express-graphql'; import {schema} from '../schema/main'; const app = express(); const recipes = new Bourne('db/recipes.json'); app.use(logger('dev')); app.use(express.static('public')); app.use('/graphql', graphqlHTTP({ schema, context: {recipes}, graphql: true })); app.listen(3000, () => console.log(`Application running at 'http://localhost:3000'`)); пс. этот пример не юзает фреймворк Relay, его пока не копал времени не было, сделал через супермодный fetch Прикреплённый файлreact_in_action_v3_3.zip (10,28 Кбайт, скачиваний: 117) |
Сообщ.
#24
,
|
|
|
Итак продолжаю расти
Вот новая версия нашего учебного приложения под названием Recipes, но на этот раз я его переложил на что вы думаете? На Relay! да да не удивляйтесь! С Реле пришлось повозиться, сильный зверек, но таки я его одолел! Ну или почти одолел Короче вот сорцы: app.js import React, {Component} from 'react'; import {render} from 'react-dom'; import '../node_modules/bootstrap/dist/css/bootstrap.min.css'; import Menu from './components/menu'; import RecipeForm from './components/recipe-form'; import {v4} from 'uuid'; import {QueryRenderer, graphql} from 'react-relay'; import environment from './environment'; class App extends Component { // state = { // recipes: [] // } constructor() { super(); this.doRate = this.doRate.bind(this); this.addRecipe = this.addRecipe.bind(this); } ........ render() { return ( // ТУТ МАГИЯ! <QueryRenderer environment={environment} query={graphql` query appQuery { recipes { id name ingredients { name amount measurement } steps rating } } `} render={({props}) => { return ( <div className="container"> <Menu recipes={props ? props.recipes : []} onRate={this.doRate}/> <RecipeForm onNewRecipe={this.addRecipe}/> </div> ); }} /> ); } } render( <App/>, document.getElementById('app') ); environment.js import { Environment, Network, RecordSource, Store } from 'relay-runtime'; function fetchQuery(operation, variables) { return fetch('/graphql', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ query: operation.text, variables, }), }).then(response => { return response.json(); }); } export default new Environment({ network: Network.create(fetchQuery), store: new Store(new RecordSource()), }); schema.graphql type Ingredient { name: String amount: Float measurement: String } type Query { recipes: [Recipe] } type Recipe { id: ID! name: String ingredients: [Ingredient] steps: [String] rating: Int } Прикреплённый файлreact_in_action_v4_1.zip (10,82 Кбайт, скачиваний: 108) Для Реле требуются несколько пакетов которые указаны в package.json. Технология создания Реакт-Реле приложения предусматрисает различние генераторы для создания заготовок, но я их не юзал, по простой причине чтобы лучше разобраться в них. Но одну фиговину а таки заюзал называется она get-graphql-schema при создания schema.graphql. Сразу огаварюсь что приложение не закончено ибо необходимо еще реализовать мутации Какие мутации? таки! поскольку к приложению прикручен Relay необходимость в state отпала ибо все изменения будут сохраняться непосредственно в БД через эти буть они не ладны мутиции, которые я еще кстати не изучил Спокойно! спокойно, я изучаю и скоро выложу версию с мутациями А пока чисто пример загрузки данных из БД в наше приложение и отображение на экран, естественно теперь интеракритновть пропала поскольку state не задействован пс. чуть не забыл добавилась еще одна команда yarn relay, она указана в package.json, с ее помощью мы запускаем Реле компилятор (relay-compiler), который создаст папку __generated__ в которой будет в нашем случае один файл с именем appQuery.graphql.js. Нами он не юзается но Реле-компилятор в какой то момент компиляции его цепляет, так что если его нет то будет ошибка компиляции. Вооот! Если ни че не поняли забейте, просто запустите yarn relay, а затем yarn build и будет вам счастье! Кстати заметили в файле environment.js функцию fetchQuery, а в ней вызов fetch? Да это та самая fetch, что я юзал в предыдущем примере, и в Реле без этой супермодной фунси далеко не уйдешь Есть разные варианты работы с GraphQL например через graphcool + Apollo как я почитал он более простой, но мы не ищем простых путей так ведь? А кроме того Реле оно детище Фейсбук, а мы ведь хотим там работать! Ну или быть около Фейсбук |
Сообщ.
#25
,
|
|
|
1) Relay - это полное дерьмо. Выкинь его на помойку.
2) А теперь ставь Apollo, это на порядок лучше Realy. Можешь ещё в сторону Graphcool или Prisma посмотреть в качестве сервера. А ещё лучше мой фреймворк, но это уже другая история Добавлено Цитата Cfon @ Есть разные варианты работы с GraphQL например через graphcool + Apollo как я почитал он более простой, но мы не ищем простых путей так ведь? Блин, я не дочитал до этой строки. Увидел ключевое слово "Relay" и сразу пошёл брюзжать Короче, правильно люди говорят. Relay - шлак. |
Сообщ.
#26
,
|
|
|
Цитата Serafim @ 1) Relay - это полное дерьмо. Выкинь его на помойку. Возможно речь о Relay Classic? А Relay Modern вроде нормуль Цитата Serafim @ 1) Можешь ещё в сторону Graphcool или Prisma посмотреть в качестве сервера. А ещё лучше мой фреймворк, но это уже другая история в учебных целях имхо лучше все ручками поэтому с помощью express-graphql создаю свой GraphQL-сервер. потом можно Graphcool или Prisma поюзать. |
Сообщ.
#27
,
|
|
|
Цитата Cfon @ Возможно речь о Relay Classic? А Relay Modern вроде нормуль Не возможно, а точно) Modern - возможно, не смотрел. Там ведь нет этих грёбанных edges и прочего? Добавлено Цитата Cfon @ потом можно Graphcool или Prisma поюзать. Юзай Railt Правда я его ещё не зарелизил. Но вот как начнёшь смотреть на призму, тогда может и зарелижу))) |
Сообщ.
#28
,
|
|
|
Цитата Serafim @ Не возможно, а точно) Modern - возможно, не смотрел. Там ведь нет этих грёбанных edges и прочего? есть, а что они мешают? это же вроде относится к пагинации (pagination) GraphQL, а не Relay? Пагинация в Реле реализуется через соединения (Connections) и если пагинация не нужна то не юзим соединения и edges не будет. Или я не правильно тебя понял? Цитата Serafim @ Юзай Railt Правда я его ещё не зарелизил. Но вот как начнёшь смотреть на призму, тогда может и зарелижу))) Ок почекаю если че хотя я и Графкуль с Призмой врядли буду ща юзать |
Сообщ.
#29
,
|
|
|
Цитата Cfon @ есть, а что они мешают? это же вроде относится к пагинации (pagination) GraphQL, а не Relay? Это относится непосредственно к этому Relay. Потому что эти edges и connections суперкостыль этого релея для пагинации, которую можно было сделать по-нормальному, вместо того дерьма, что они предлагают. |
Сообщ.
#30
,
|
|
|
Цитата Serafim @ Цитата Cfon @ есть, а что они мешают? это же вроде относится к пагинации (pagination) GraphQL, а не Relay? Это относится непосредственно к этому Relay. Потому что эти edges и connections суперкостыль этого релея для пагинации, которую можно было сделать по-нормальному, вместо того дерьма, что они предлагают. http://graphql.github.io/learn/pagination/ а это статья о чем? разве она про Реле? |