GraphQL Return Query Result as an Array

Question

I have been following the React-Apollo and Node.js GraphQL Tutorials on https://www.howtographql.com/ and was able to get a demo up and running.

What I would like to do now is return the result of my query as an array.

My schema.graphql file looks like this:

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

And the resolver looks like:

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

What I have tried so far is:

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.log(temp);

    return temp
}

I should be getting a list of Tickets but I am getting undefined.

Rachid Rhafour · Accepted Answer · 2018-11-23 23:08:58Z

How to use client.query or client.mutation without using jsx

I had the same issue, I wanted to use query without using any jsx, the solution is to use ApolloClient, at some point in your app you will use ApolloProvider which u will need to give it an instance of ApolloClient as a prop, all u have to do is export that client and u can then use it anywhere else not only in the ApolloProvider. Here is an example

initApollo.js

this is where Apollo client is initialized.

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
})

does this answers your question ?

Collectives™ on Stack Overflow

GraphQL Return Query Result as an Array

1 Answer 1

How to use client.query or client.mutation without using jsx

initApollo.js

useClientWithoutJsx.js

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

How to use client.query or client.mutation without using jsx

initApollo.js

useClientWithoutJsx.js

Comments

Your Answer

Sign up or log in

Post as a guest

Related