На главную Наши проекты:
Журнал   ·   Discuz!ML   ·   Wiki   ·   DRKB   ·   Помощь проекту
ПРАВИЛА FAQ Помощь Участники Календарь Избранное RSS
msm.ru
Модераторы: ElcnU, ANDLL, fatalist
Страницы: (3) 1 [2] 3  все  ( Перейти к последнему сообщению )  
> Изучаю React , modern style: ES7, Babel, webpack, bootstrap
    Цитата Астарот @
    Так те же яйца, только в профиль

    Не совсем. Это как использовать ФС вместо БД. Причём эта аналогия, если подумать и с переносом с сервера на клиент-серверное взаимодействие - похожа на реальность.
      Цитата Serafim @
      Не совсем

      В том плане, что все едино, что для REST нужно читать доку, что для GraphQL - совсем :) Как не было реальной унификации, так ее и нет.
        Цитата Астарот @
        Как не было реальной унификации, так ее и нет.

        А что есть "реальная" унификация? :huh:
          Цитата Serafim @
          А что есть "реальная" унификация? :huh:

          Ничто не есть, в том и дело.
            Цитата Serafim @
            REST API REST IN PEACE :whistle:

            ну пока ешо не умер, много где юзается :D
            Добавлено
            Цитата Астарот @
            Hail to the GraphQL? :D

            ну или Falcor :D
            Сообщение отредактировано: Cfon -
              Кстати кто-нибудь юзал или юзит GraphQL + React?
                Цитата Cfon @
                Кстати кто-нибудь юзал или юзит GraphQL + React?

                Да, у нас на проде в 3х проектах)
                  Цитата Serafim @
                  Цитата Cfon @
                  Кстати кто-нибудь юзал или юзит GraphQL + React?

                  Да, у нас на проде в 3х проектах)

                  Ок. Я тоже решил не тупить :D
                  Переделал пример выше с использованием GraphQL :blush:
                  Зацените что у меня получилось

                  app.js
                  ExpandedWrap disabled
                    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
                  ExpandedWrap disabled
                    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
                  ExpandedWrap disabled
                    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 :D

                  Прикреплённый файлПрикреплённый файлreact_in_action_v3_3.zip (10,28 Кбайт, скачиваний: 114)
                  Сообщение отредактировано: Cfon -
                    Итак продолжаю расти :blush:
                    Вот новая версия нашего учебного приложения под названием Recipes, но на этот раз я его переложил на что вы думаете?
                    На Relay! да да не удивляйтесь! :D
                    С Реле пришлось повозиться, сильный зверек, но таки я его одолел! Ну или почти одолел :lool:
                    Короче вот сорцы:

                    app.js
                    ExpandedWrap disabled
                      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
                    ExpandedWrap disabled
                      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
                    ExpandedWrap disabled
                      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.

                    Сразу огаварюсь что приложение не закончено ибо необходимо еще реализовать мутации :blink:
                    Какие мутации? таки! поскольку к приложению прикручен Relay необходимость в state отпала :D
                    ибо все изменения будут сохраняться непосредственно в БД через эти буть они не ладны мутиции, которые я еще кстати не изучил :D
                    Спокойно! спокойно, я изучаю и скоро выложу версию с мутациями :crazy:
                    А пока чисто пример загрузки данных из БД в наше приложение и отображение на экран, естественно теперь интеракритновть пропала поскольку state не задействован :D

                    пс. чуть не забыл добавилась еще одна команда yarn relay, она указана в package.json, с ее помощью мы запускаем Реле компилятор (relay-compiler), который создаст папку __generated__ в которой будет в нашем случае один файл с именем appQuery.graphql.js. Нами он не юзается но Реле-компилятор в какой то момент компиляции его цепляет, так что если его нет то будет ошибка компиляции. Вооот! Если ни че не поняли забейте, просто запустите yarn relay, а затем yarn build и будет вам счастье! :whistle:

                    Кстати заметили в файле environment.js функцию fetchQuery, а в ней вызов fetch? Да это та самая fetch, что я юзал в предыдущем примере, и в Реле без этой супермодной фунси далеко не уйдешь :D

                    Есть разные варианты работы с GraphQL например через graphcool + Apollo как я почитал он более простой, но мы не ищем простых путей так ведь? :D
                    А кроме того Реле оно детище Фейсбук, а мы ведь хотим там работать! Ну или быть около Фейсбук :jokingly:
                    Сообщение отредактировано: Cfon -
                      1) Relay - это полное дерьмо. Выкинь его на помойку.
                      2) А теперь ставь Apollo, это на порядок лучше Realy.


                      Можешь ещё в сторону Graphcool или Prisma посмотреть в качестве сервера. А ещё лучше мой фреймворк, но это уже другая история :D

                      Добавлено
                      Цитата Cfon @
                      Есть разные варианты работы с GraphQL например через graphcool + Apollo как я почитал он более простой, но мы не ищем простых путей так ведь?

                      Блин, я не дочитал до этой строки. Увидел ключевое слово "Relay" и сразу пошёл брюзжать :lol: Короче, правильно люди говорят. Relay - шлак.
                      Сообщение отредактировано: Serafim -
                        Цитата Serafim @
                        1) Relay - это полное дерьмо. Выкинь его на помойку.

                        Возможно речь о Relay Classic?
                        А Relay Modern вроде нормуль :)

                        Цитата Serafim @
                        1) Можешь ещё в сторону Graphcool или Prisma посмотреть в качестве сервера. А ещё лучше мой фреймворк, но это уже другая история :D

                        в учебных целях имхо лучше все ручками :D
                        поэтому с помощью express-graphql создаю свой GraphQL-сервер.
                        потом можно Graphcool или Prisma поюзать.
                        Сообщение отредактировано: Cfon -
                          Цитата Cfon @
                          Возможно речь о Relay Classic?
                          А Relay Modern вроде нормуль


                          Не возможно, а точно) Modern - возможно, не смотрел. Там ведь нет этих грёбанных edges и прочего?

                          Добавлено
                          Цитата Cfon @
                          потом можно Graphcool или Prisma поюзать.

                          Юзай Railt :lol:

                          Правда я его ещё не зарелизил. Но вот как начнёшь смотреть на призму, тогда может и зарелижу)))
                            Цитата Serafim @
                            Не возможно, а точно) Modern - возможно, не смотрел. Там ведь нет этих грёбанных edges и прочего?

                            есть, а что они мешают? :blink:
                            это же вроде относится к пагинации (pagination) GraphQL, а не Relay?
                            Пагинация в Реле реализуется через соединения (Connections) и если пагинация не нужна то не юзим соединения и edges не будет.
                            Или я не правильно тебя понял? :huh:

                            Цитата Serafim @

                            Юзай Railt :lol:

                            Правда я его ещё не зарелизил. Но вот как начнёшь смотреть на призму, тогда может и зарелижу)))

                            Ок почекаю если че :D
                            хотя я и Графкуль с Призмой врядли буду ща юзать
                            Сообщение отредактировано: Cfon -
                              Цитата Cfon @
                              есть, а что они мешают?
                              это же вроде относится к пагинации (pagination) GraphQL, а не Relay?

                              Это относится непосредственно к этому Relay. Потому что эти edges и connections суперкостыль этого релея для пагинации, которую можно было сделать по-нормальному, вместо того дерьма, что они предлагают.
                              Сообщение отредактировано: Serafim -
                                Цитата Serafim @
                                Цитата Cfon @
                                есть, а что они мешают?
                                это же вроде относится к пагинации (pagination) GraphQL, а не Relay?

                                Это относится непосредственно к этому Relay. Потому что эти edges и connections суперкостыль этого релея для пагинации, которую можно было сделать по-нормальному, вместо того дерьма, что они предлагают.

                                http://graphql.github.io/learn/pagination/
                                а это статья о чем? разве она про Реле? :huh:
                                Сообщение отредактировано: Cfon -
                                0 пользователей читают эту тему (0 гостей и 0 скрытых пользователей)
                                0 пользователей:
                                Страницы: (3) 1 [2] 3  все


                                Рейтинг@Mail.ru
                                [ Script execution time: 0,0496 ]   [ 19 queries used ]   [ Generated: 28.03.24, 23:38 GMT ]