marmelab / aor-simple-graphql-client Goto Github PK

Could not get this graphql client to work on admin-on-rest. Can you please provide a working example? The example under Usage in Readme contains a few errors.

Ie, ApolloClient is never imported. createRestClient is not used anywhere.

Also, Request URL seem to always default to http://localhost:3000/graphql, even though I defined my URL in clientOptions to http://localhost.dev/graphql.

Just so people are aware of this:

aor-simple-graphql-client won't work until next version of admin-on-rest is released.

This is because the current version of admin-on-rest does no yet include https://github.com/marmelab/admin-on-rest/pull/318.

I'll close this issue when it's available

Hi, first of all, thanks for building this!

I am trying to install it via npm but the repo is not found:

'error Couldn't find package "aor-simple-graphql-client" on the "npm" registry.'

this is the error

and my graphql server return types without name==="Query"

When I try to update or create an element admin-on-rest doesn't variables provided.

The repo I use : https://github.com/JeresB/cuistot-aor
My Question on stackoverflow : https://stackoverflow.com/questions/45056706/admin-on-rest-error-data-format

The future release of admin-on-rest changes the expected format for REST responses (see https://github.com/marmelab/admin-on-rest/pull/385). It should be released within 2 weeks.

You need to release a new major version of aor-simple-graphql-client to take this change into account.

Hi, I followed the documentation about this theme but I don't know where place my queries constant. I tried placing the queries constant on buildApolloClient options but doesn't work:

const queries = {
  Post: {
    // Is an example, but doesn't works.
    CREATE: () => gql`
        mutation createPost($data: String, $myCustomVar: String){
            createPost(data: $data, myCustomVar: $myCustomVar) {
                id
            }
        }
    `
  }
}

buildApolloClient({ queries })

I got the following error:

I'm doing something wrong but I do not know what, thanks for the support.

To make the list aor-simple-graphql-client use only the last item, but as we can see on the picture the request work fine with graphiql.

https://stackoverflow.com/questions/44973525/aor-simple-graphql-client-error-when-loading-data
Here the repo I use : https://github.com/JeresB/cuistot-aor

See #22

having followed the README guide, I am a little frustrated.

I can see the graphql introspection query in my network tab and It does get all the type and inputs from my schema, but nothing for the queries and mutations.

{
  "queryType": {
    "name":"Query"
  },
  "mutationType": {
    "name":"Mutation"
  },
  //...
}

I have this

componentDidMount() {
      buildApolloClient({ clientOptions, introspection: introspectionOptions })
          .then(restClient => this.setState({ restClient }));
  }

where clientOptions is

const apiUrl = process.env.REACT_APP_API_URL
export const clientOptions = {
  uri: `${apiUrl}/graphql`
}

and introspectionOptions is the same as in README :

import pluralize from 'pluralize'

export const introspectionOptions = {
  includeTypes: null, // Either an array of types to include or a function which will be called with each OBJECT type discovered through introspection
  excludeTypes: null, // Either an array of types to exclude or a function which will be called with each OBJECT type discovered through introspection (`Query` and `Mutation` are excluded anyway)
  includeQueries: null, // Either an array of queries to include or a function which will be called with each query discovered through introspection
  excludeQueries: null, // Either an array of queries to exclude or a function which will be called with each query discovered through introspection
  includeMutations: null, // Either an array of mutations to include or a function which will be called with each mutation discovered through introspection
  excludeMutations: null, // Either an array of mutations to exclude or a function which will be called with each mutation discovered through introspection
  excludeFields: null, // Either an array of fields to exclude or a function which will be called with each field discovered through introspection on a specific object (more details below)

  // This contains templates for defining the queries and mutations names which will also be used as the operations names
  templates: {
    GET_LIST: resourceType => `getPageOf${pluralize(resourceType.name)}`,
    GET_ONE: resourceType => `get${resourceType.name}`,
    CREATE: resourceType => `create${resourceType.name}`,
    UPDATE: resourceType => `update${resourceType.name}`,
    DELETE: resourceType => `remove${resourceType.name}`,
  },
}

Am I missing something ?

Hi.

I've encountered a problem while working with the client. The thing is I can see queries are fetched in introspection, but they are not occurring while trying to fetch resource list.

Basing on readme, here's some code of mine

// users/index.js
import React from 'react';
import { List, Datagrid, TextField } from 'admin-on-rest/lib/mui';

export const UserList = props => (
    <List {...props} sort={{ field: 'created_at', order: 'DESC' }} perPage={25}>
        <Datagrid bodyOptions={{ stripedRows: true, showRowHover: true }}>
            <TextField source="id" />
            <TextField source="name"/>
        </Datagrid>
    </List>
);

// App.js
import React, { Component } from 'react';
import { buildApolloClient } from 'aor-simple-graphql-client';
import { Admin, Resource } from 'admin-on-rest';
import { UserList } from './users/index';

import './App.css';

class App extends Component {
    constructor() {
        super();
        this.state = { restClient: null };
    }
    componentDidMount() {
        buildApolloClient({ clientOptions: { uri: 'http://localhost:4000/graphql'} })
            .then(restClient => this.setState({ restClient }));
    }

    render() {
        const { restClient } = this.state;

        if (!restClient) {
            return <div>Loading</div>;
        }

        return (
            <Admin
                restClient={restClient}
            >
                <Resource name="Users" list={UserList} />
            </Admin>
        );
    }
}

export default App;

Fetched queries by introspection

Errors

Server introspection response

I appriciate any advice from you.

Hi, thanks for the awesome work.

I'm trying to follow the readme and I'm stuck with this error when loading the page:

buildFieldList.js?7695:69 Uncaught (in promise) RangeError: Maximum call stack size exceeded
    at Array.find (native)
    at eval (eval at <anonymous> (http://localhost:3000/webpack/development/webpack-bundle-949b87a75a60b8b8d5c9.js:9388:1), <anonymous>:69:34)
    at Array.map (native)
    at buildFieldListFromList (eval at <anonymous> (http://localhost:3000/webpack/development/webpack-bundle-949b87a75a60b8b8d5c9.js:9388:1), <anonymous>:64:8)
    at eval (eval at <anonymous> (http://localhost:3000/webpack/development/webpack-bundle-949b87a75a60b8b8d5c9.js:9388:1), <anonymous>:74:37)
    at Array.map (native)
    at buildFieldListFromList (eval at <anonymous> (http://localhost:3000/webpack/development/webpack-bundle-949b87a75a60b8b8d5c9.js:9388:1), <anonymous>:64:8)
    at eval (eval at <anonymous> (http://localhost:3000/webpack/development/webpack-bundle-949b87a75a60b8b8d5c9.js:9388:1), <anonymous>:74:37)
    at Array.map (native)
    at buildFieldListFromList (eval at <anonymous> (http://localhost:3000/webpack/development/webpack-bundle-949b87a75a60b8b8d5c9.js:9388:1), <anonymous>:64:8)

This is my admin page:

import React, { Component } from 'react';
import { buildApolloClient } from 'aor-simple-graphql-client';

import { Admin, Resource } from 'admin-on-rest';
import { Delete } from 'admin-on-rest/lib/mui';

import { CustomerList } from './customers';

class AdminPage extends Component {
  constructor() {
    super();
    this.state = { restClient: null };
  }
  
  componentDidMount() {
    buildApolloClient({ clientOptions: { uri: '/queries' } })
      .then(restClient => this.setState({ restClient }));
  }

  render() {
    if (!this.state.restClient) {
        return <div>Loading</div>;
    }

    return (
      <Admin restClient={this.state.restClient}>
        <Resource name='Customer' list={CustomerList} />
      </Admin>
    );
  }
}

export default AdminPage;

customer page:

import React from 'react';
import { List, Datagrid, TextField } from 'admin-on-rest';

export const CustomerList = (props) => (
  <List {...props}>
    <Datagrid>
      <TextField source="id" />
    </Datagrid>
  </List>
);

GraphQL query and it's result:

// query
{
  getPageOfCustomers(page: 0, perPage: 10, sortField: "", sortOrder: "", filter: "") {
    items {
      id
    }
    totalCount
  }
}
// response
{
  "data": {
    "getPageOfCustomers": {
      "items": [
        {
          "id": "1"
        }
      ],
      "totalCount": 1
    }
  }
}

Ability to supply a graphql flavor object:

{
    GET_LIST: {
        operationName: (resource) => `getPageOf${pluralize(resource.name)}`,
        query: (operationName, fields) => gql`...`, // Returns the graphql query
        getParameters: (params) => ({}), // Returns an object of params which will be passed to query/mutation with Apollo
        parseResponse: (response, resource, apolloParams) => ({}) // Parse the response into the format expected by Admin-on-rest
    }
}

Hello gentlemans,

I've been trying to plug AOR on a graphcool backend for 2 days, and the documentation is driving me crazy.

It is mentioned that this package is not working for graphcool, and therefore that we should use the one linked. However, on the package you linked, it is said that the package is deprecated, and that we should now use GraphQL flavors (using aor-simple-graphql-client).

I found this package as well (https://github.com/marmelab/aor-graphql/tree/master/packages/aor-graphql-client-graphcool), but it seems that it's still in WIP because I didn't managed to get it completely working.

What current solution are we supposed to use for us to bridge graphcool with AOR ?

Btw, I have tried using aor-simple-graphql-client with GraphQL flavors, and miserably failed at it :(.

Have a nice day guys.

Listed in your package.json peerDependencies is a very old version of admin-on-rest.
"admin-on-rest": "~0.9.1"

Listed in your devDependencies is a different version.
"admin-on-rest": "~1.0.1"

The latest version of admin-on-rest depends on a newer version of redux-saga.
The error that is thrown when using [email protected] & [email protected] is
uncaught at rootSaga TypeError: (0 , _effects.all) is not a function 
redux-saga/redux-saga#995

Hi all,

This project was a POC to explore how to use GraphQL with Admin-on-rest.

We're currently working on a more robust client with an easier and cleaner way to customize for backends such as graphcool. We'll release a graphcool client based on it soon after.

This is the proposed API:

aor-graphql-client

Will be responsible for making calls to the backend and retrieving the introspection results.

It'll expose an AOR client factory function taking the following options:

{
    client: {} // Either a custom Apollo client or options to create one
    queryBuilder: (introspectionResults, options) => () => {} // A function which will be called with the introspection results and must return an aor client compatible function (more on that later)
    introspection: { // An object defining the names for the queries and mutations to look for, or false to disable
        GET_LIST: (resource) => `all${pluralize(resource.type.name)}`,
        GET_ONE: (resource) => `${resource.type.name}`,
        CREATE: (resource) => `create${resource.type.name}`,
        UPDATE: (resource) => `update${resource.type.name}`,
        DELETE: (resource) => `remove${resource.type.name}`,
    }
}

The supplied queryBuilder will be called once with the introspection results and the options passed to the client.

The introspection results will take the following form:

{
    resources: [{
        type: Object, // GQL type for this resources
        GET_LIST: Object, // GQL type for the query matching the GET_LIST verb (depends on the name defined in introspection templates)
        GET_ONE: Object, // GQL type for the query matching the GET_ONE verb (depends on the name defined in introspection templates)
        CREATE: Object, // GQL type for the query matching the CREATE verb (depends on the name defined in introspection templates)
        UPDATE: Object, // GQL type for the query matching the UPDATE verb (depends on the name defined in introspection templates)
        DELETE: Object, // GQL type for the query matching the DELETE verb (depends on the name defined in introspection templates)
    }],
    queries: [], // All queries and mutations found through introspection
    types: [], // All types found through introspection
}

It must return a function which follow the standard admin-on-rest client signature and return an object containing the apollo query methods options (query and variables at least) plus a parseResponse function which will be called with the query results.

export default function myQueryBuilder(introspectionResults, options) {
    // Do what you want with the introspection results
    return function(aorFetchType, resource, params) {
        const query = generateAQueryFromIntrospection(aorFetchType, resource, params);
        const variables = getVariables(aorFetchType, resource, params);
        const parseResponse = getParseResponseFunction(aorFetchType, resource, params);

        return { query, variables, parseResponse);
    }
}

This should make full customization a lot easier.

aor-graphql-client-graphcool

Will supply the queryBuilder for graphcool

aor-graphql-client-simple

Will supply the queryBuilder for our simple implementation not tied to graphcool

Hi I have problems when I trying to use a Schema with sub-fields, the error is the next:

message: 'Field "user" of type "[Post]" must have a selection of subfields. Did you mean "user { ... }"?

Looks easy to fix, but on this package is very complicated. Please look my schema and more stuff for understand more.

Part of my Schema:

type Post {
   id: ID
   name: String
   user: User
}

type User {
  id: ID
  name: String
  email: String
}

type getPageOfPosts{
  items: [Post]
  totalCount: Int
}

query  {
  getPageOfPosts(page: Int, perPage: Int, sortField: String, sortOrder: String, filter: String): getPageOfPosts
}

schema {
  query: Query
}

The query sent automatically:

query getPageOfPosts($page: Int, $perPage: Int, $sortField: String, $sortOrder: String, $filter: String) {
  getPageOfPosts(page: $page, perPage: $perPage, sortField: $sortField, sortOrder: $sortOrder, filter: $filter) {
    items {
       id
       name
       user
    }
    totalCount
    __typename
  }
}

Query expected (Items part):

...

items {
   id
   name
   user {
     id
     name
     email
   }
}

...

Thanks for your support!

The readme states that this project is not compatible with Graphcool and we should use https://github.com/mulyoved/aor-graph-cool-client instead. However, that repo is marked as deprecated and suggests to use this repo instead.

Which one is correct? :-)

The first version might simply ignores them to avoid errors.

Later on, we might automatically include embedded objects which are not resources

It might be interesting to extract and refactor the real time saga in order to ease its usage for other client implementations.

Proposed API is:

import realtimeSaga from 'aor-realtime';

const observeRequest = (fetchType, resource, params) => {
    // Use your apollo client methods here or sockets or whatever else including the following very naive polling mechanism
    return {
        subscribe(observer) {
            const intervalId = setInterval(() => {
                fetchData(fetchType, resource, params)
                    .then(results => observer.next(results)) // New data received, notify the observer
                    .catch(error => observer.error(error)); // Ouch, an error occured, notify the observer
            }, 5000);

            const subscription = {
                unsubscribe() {
                    // Clean up after ourselves
                    clearInterval(intervalId);
                    // Notify the saga that we cleaned up everything
                    observer.complete();
                }
            };

            return subscription;
        },
    };
};

const customSaga = realtimeSaga(observeRequest);

Thanks for this awesome library! Graphql teaches this way of pagination, is there something wrong with this?

http://graphql.org/learn/pagination/

Could not find anything, therefore creating this issue for new visitors also 😄

See #22