CODEWITHSUNDEEP
reactjsgraphqlapolloreact-apolloprisma
jpol5857
jpol5857

Reputation: 11

GraphQL Return Query Result as an Array

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.

Upvotes: 1

Views: 1943

Answers (1)

Rachid Rhafour
Rachid Rhafour

Reputation: 456

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 ?

Upvotes: 1

Related Questions