Как использовать один и тот же объект но с разными свойствами в разных компонентах?

Question

[asd dsa]

Привет, я на момент инициализации приложения меняю реальный apolloClient на фиктивный, что бы вместо запросов на сервер отдавать фиктивные данные. Все работает правильно, но появилась проблема, в некоторых компонентах есть одна и та же переменная metric в которую присваиваются разные значения, (поменять название переменой в компонентах нельзя) вопрос в том как использовать эту переменную для разных компонентов сохраняя уникальность свойств?

Пример данных, которые приходят с сервера в разных запросах, для разных компонентов:
для одного компонента: {metric: {id: 1, something: "meow"}}
Для другого: {metric: {id: 2, entities: 50}}

И вот, я не могу создать две переменных metricлибо объединить данные в одну переменную metricпотому что данные в компонентах будут не корректны.

Место где отдаю свою мокапы

import {
    metric
} from "./mockedData"

export const mocks = {
    Query: () => ({
        metric // здесь отдаю фиктивные данные в подменный apolloClient 
    })
}

место где я создаю фиктивный apolloClient (чисто для полноты картины)

import ApolloClient from "apollo-client"
import {
    makeExecutableSchema,
    addMockFunctionsToSchema,
} from "graphql-tools"
import { graphql, print } from "graphql"
import { InMemoryCache } from "apollo-cache-inmemory"
import { ApolloLink, Observable } from "apollo-link"

// simulate loading
function delay(ms) {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve()
        }, ms)
    })
}

function createLink(schema, mocks) {
    const delayMs = 1000
    return new ApolloLink(operation => new Observable((observer) => {
        const { query, operationName, variables } = operation
        delay(delayMs)
            .then(() => graphql(
                schema,
                print(query),
                {},
                {},
                variables,
                operationName
            ))
            .then(() => {
                // inject mocked data here
                observer.next({ data: mocks.Query() })
                observer.complete()
            })
            .catch(observer.error.bind(observer))
    }))
}

export function createMockedClient({
    typeDefs,
    mocks,
}) {
    const schema = makeExecutableSchema({ typeDefs })

    const mockOptions = {
        schema,
        mocks,
    }

    addMockFunctionsToSchema(mockOptions)

    const cache = new InMemoryCache()

    return new ApolloClient({
        cache,
        link: ApolloLink.from([
            createLink(schema, mocks),
        ]),
        connectToDevTools: true,
    })
}

Помогите пожалуйста =^.^=

Answer 1

[Николай Ланец]

Для полноты картины надо было еще схему вашего компонента приложить.

Если в вашей схеме что-то типа такого:

type Metric {
  id: Int!
  something: String
}

и хотите, чтобы он мог корректно возвращать entities: 50, то самое правильное это добавить это свойство в саму модель.

type Metric {
  id: Int!
  """ Боевая переменная """
  something: String

  """ Для тестов """
  entities: Int
}

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

Это по сути единственный наиболее удобный путь для этого.

Если у вас ситуация сложнее (в боевом режиме значительно больше полей и вы не хотите все поля перечислять), то для малозначительных моделей вы и вовсе можете задать тип JSON.
Если вы используете Apollo-Server, вот их официальная инструкция: https://www.apollographql.com/docs/graphql-tools/s...
Тогда у вас объект может вообще любой набор валидных свойств иметь. Но не советую с этим увлекаться, это часто приводит к хаосу.

Comments

[Somewhere Intech]

Как вообще на js такое не написать? Даже на жёстко типизированных языках такое реализуется обычной обёрткой над классом, неужели нельзя подменять/изменять свойства хоть бы "левой" функцией конструктором, которая по сути и будет выступать обёрткой

[asd dsa]

спасибо за ответ, все существующие свойства переменой описаны в схеме но проблема в другом, я возвращаю переменную metric с фиктивными данными всего раз и она по факту покрывает только один компонент, потому что например компонент 1 имеет значение свойстваlabel: "foo" в переменой metric, а компонент 2 label: "bar". Проблема в том, когда я хардкодю переменную metric то это свойство label будет валидно только, для одного компонента, вот в чем беда. И я не не знаю, как хардкодить валидные данные, для всех компонентов с помощью одной этой переменой

[Николай Ланец]

Johnny Lowhunter, если говорить об изменениях, то менять можно данные (на уровне тех же резолверов). Но нельзя просто так схему поменять. Если там прописан определенный набор полей с определенными типами данных, то будут использованы только они. Нельзя через граф запросить данные и получить другие типы данных. Можно только либо до выполнения запроса изменить их (чтобы они соответствовали схеме) или уже после выполнения запроса на своей стороне преобразовать данные.

[Николай Ланец]

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