GraphQL возвращает результат запроса в виде массива

Я слежу за учебными пособиями по React-Apollo и Node.js GraphQL на https://www.howtographql.com/ и смог запустить демо.

Теперь я хотел бы вернуть результат моего запроса в виде массива.

Мой файл schema.graphql выглядит так:

type Query{
  pullTickets (where: TicketWhereInput): [Ticket!]!
}

И решатель выглядит так:

const resolvers = {
    Query: {
      pullTickets: (root, args, context, info,) => {
        return context.db.query.tickets({}, info)
      }
    }
  }

Что я пробовал до сих пор:

import React, { Component } from 'react';
import Query from "react-apollo/Query";
import gql from "graphql-tag";

const GET_TICKETS = gql`
  query getTickets($startDate: DateTime!, $endDate: DateTime!) {
    pullTickets (where: {
        AND:[{DateCloseDate_gt: $startDate}, {DateCloseDate_lt: $endDate}]})
      {
        id
      }
  }
`;

export default function GetTickets ( startDate, endDate ) {

    var temp = [];

    <Query query = {GET_TICKETS} variables = {{ startDate, endDate }} >

      {({ loading, error, data }) => {

        if (loading) return 'Loading...';
        if (error) return `Error!: ${error}`;

        // This doesn't seem to do anything
        temp = data.pullTickets

      }}

    </Query>

    // temp is showing up as "undefined" in the console
    console.info(temp);

    return temp
}

Я должен получить список билетов, но я получаю неопределенный.

reactjs graphql apollo react-apollo prisma

08.08.2018 22:38

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

1 309

Ответы 1

Как использовать client.query или client.mutation без использования jsx

У меня была такая же проблема, я хотел использовать запрос без использования jsx, решение - использовать ApolloClient, в какой-то момент в вашем приложении вы будете использовать ApolloProvider, который вам нужно будет предоставить ему экземпляр ApolloClient в качестве опоры, все u необходимо экспортировать этого клиента, и затем вы сможете использовать его в любом другом месте, а не только в ApolloProvider. Вот пример

initApollo.js

здесь инициализируется клиент Apollo.

import { ApolloClient } from 'apollo-client';
.
.
.
initApolloClient ({ uri }) => {
.
.
.
 return new ApolloClient({
   link,
   cache,
 });
}
export default initApolloClient

useClientWithoutJsx.js

import initApollo from './initApollo';


client = initApollo({ uri: 'http://localhost:4000' });
client.query(({query: SOME_QUERY, variables: {id: 2}) => {
   // return data
})

это отвечает на ваш вопрос?

24.11.2018 00:08