Получение идентификатора связанного объекта с помощью GraphQL, Apollo и React - PullRequest
Новая
       3

Получение идентификатора связанного объекта с помощью GraphQL, Apollo и React

0 голосов
/ 10 марта 2020

Я создаю базу данных управления событиями, которая обрабатывает RSVP и связывает эти RSVP с указанным c событием. Я использую React, Apollo, GraphQL и Prisma в качестве стека, и у меня возникают проблемы с правильным написанием мутации, которая связывает RSVP с существующим событием. Все еще относительно новый синтаксис, но я не могу взять event.id, когда использую мутацию createRsvp.

Я могу передать event.id вниз через интерфейс и я думаю, что менее элегантный способ получения event.id в аргументах RSVP - это создание скрытой формы с помощью event.id, но я ЗНАЮ, что есть путь через graphQL. Я попытался просмотреть документы и различные примеры получения идентификатора из другого объекта. Любая помощь очень ценится:)

На сервере, вот моя модель данных: 

    type Rsvp {
      id: ID! @id
      event: Event! @relation(link: INLINE)
      firstName: String!
      lastName: String!
      email: String! @unique
      company: String
      jobTitle: String
      mobile: String
      dietary: String
    }

    type Event {
      id: ID! @id
      isPublished: Boolean
      title: String!
      startDate: String!
      endDate: String!
      description: String!
      image: String
      address: String
      url: String!
      suburb: String
      postcode: String
      state: String
      country: String
      guestLimit: Int
      rsvps: [Rsvp]
    }

Фактический распознаватель для мутации .. Я думаю, что я неправильно получаю event.id здесь , Мой процесс состоит в том, что данные: {... args} сначала получает данные из формы RSVP, а соединение с событием связывает их с определенным событием. 

async createRsvp(parent, args, ctx, info) {
    // 1. Query the event that is being registered for
    const eventId = ctx.request.event.id;
    // 2. Create the RSVP for this specific event
    const rsvp = await ctx.db.mutation.createRsvp(
      {
        data: {
          ...args,
          event: {
            connect: { id: eventId }
          }
        }
      },
      info
    );
    console.log(rsvp);
    return rsvp;
  }
};

На внешнем интерфейсе Вот как выглядит моя мутация 

const RSVP_MUTATION = gql`
  mutation RSVP_MUTATION(
    $email: String!
    $firstName: String!
    $lastName: String!
    $company: String
    $jobTitle: String
    $mobile: String
    $dietary: String
  ) {
    createRsvp(
      email: $email
      firstName: $firstName
      lastName: $lastName
      company: $company
      jobTitle: $jobTitle
      mobile: $mobile
      dietary: $dietary
    ) {
      id
    }
  }
`;

и, наконец, функция мутации в форме: 

<Mutation mutation={RSVP_MUTATION} variables={({ id }, this.state)}>
              {(createRsvp, { loading, error }) => (
                <Form
                  onSubmit={async e => {
                    e.preventDefault();
                    const res = await createRsvp();
                  }}>

Ошибка, которую я получаю в консоли: «Uncaught (в обещании)» Ошибка: ошибка GraphQL: невозможно прочитать свойство 'id' из undefined ", что наводит меня на мысль, что я неправильно пытаюсь получить доступ к event.id. Любые советы или советы? Еще раз спасибо!

1 Ответ

0 голосов
/ 10 марта 2020

Разделяй и властвуй

Вы можете использовать /graphiql игровую площадку для тестирования запросов и мутаций (API в целом).

Тестирование этой мутации: 

mutation RSVP_MUTATION(
  $email: String!
  $firstName: String!
  $lastName: String!
  $company: String
  $jobTitle: String
  $mobile: String
  $dietary: String
) {
  createRsvp(
    email: $email
    firstName: $firstName
    lastName: $lastName
    company: $company
    jobTitle: $jobTitle
    mobile: $mobile
    dietary: $dietary
  ) {
    id
  }
}

.. . с обязательными переменными вы должны быстро заметить, что вам также нужно передать идентификатор события как переменную. Никакого специального (более / менее элегантного), отдельный метод не требуется, это стандарт, запрос / мутация и переменные, не более !!!

Просто добавьте переменную eventId: 

mutation RSVP_MUTATION(
  $eventId: ID!
  $email: String!
  $firstName: String!
  $lastName: String!
  $company: String
  $jobTitle: String
  $mobile: String
  $dietary: String
) {
  createRsvp(
    eventId: $eventId
    email: $email
    firstName: $firstName
    lastName: $lastName
    company: $company
    jobTitle: $jobTitle
    mobile: $mobile
    dietary: $dietary
  ) {
    id
  }
}

Конечно, в resolver вы получите его в пределах args, вы можете использовать fe 

const { eventId, ...rest } = args;
const rsvp = await ctx.db.mutation.createRsvp(
  {
    data: {
      ...rest,
      event: {

Переменные реагирования могут быть переданы, например, 

variables={{ eventId: id, ...this.state }}
...