Provide Proper documentation how to use this libary

[rigalpatel001]

Hello,

How too uses this library and check queries and mutation using graphql tools. I had just put library in vendor folder. Would you please let me know steps how to test queries and mutation.

Thanks

[mrbarletta]

Hi @rigalpatel001 I am updating a bit more the readme.

I just tested a fresh installation of suitecrm 7.11.2 with this GraphQLSuiteCRM composer extension and works fine.

The trick here is to once installed access GraphiQL in the vendor folder (this was missing in the documentation)http://localhost/vendor/lionixevolve/graphqlsuitecrm/graphql/GraphiQL/

Bellow the updated setup, let me know if it works fine

Set up

composer require lionixevolve/graphqlsuitecrm

This will install the plugin in the vendor folder with all the requirements.

PHP extension php-intl its a requirement, for ubuntu install as sudo apt-get install php-intl

Testing and Usage

GraphiQL is included in the package, to start using it open the web broser in http://localhost/vendor/lionixevolve/graphqlsuitecrm/graphql/GraphiQL/ (adjust localhost to the suitecrm instance location) Use the included GraphiQL to try this

{
  accounts(limit:2) {
    name
  }
}

[rigalpatel001]

Hello I have setup properly but getting below errors.

Error: Introspection must provide input type for arguments.
   at invariant (http://localhost/suitecrm/suitecrm-demo/vendor/lionixevolve/graphqlsuitecrm/graphql/GraphiQL/graphiql.min.js:14:12282)
   at t (http://localhost/suitecrm/suitecrm-demo/vendor/lionixevolve/graphqlsuitecrm/graphql/GraphiQL/graphiql.min.js:17:12037)
   at m (http://localhost/suitecrm/suitecrm-demo/vendor/lionixevolve/graphqlsuitecrm/graphql/GraphiQL/graphiql.min.js:17:14453)
   at http://localhost/suitecrm/suitecrm-demo/vendor/lionixevolve/graphqlsuitecrm/graphql/GraphiQL/graphiql.min.js:14:13086
   at Array.reduce (<anonymous>)
   at keyValMap (http://localhost/suitecrm/suitecrm-demo/vendor/lionixevolve/graphqlsuitecrm/graphql/GraphiQL/graphiql.min.js:14:13050)
   at y (http://localhost/suitecrm/suitecrm-demo/vendor/lionixevolve/graphqlsuitecrm/graphql/GraphiQL/graphiql.min.js:17:14400)
   at http://localhost/suitecrm/suitecrm-demo/vendor/lionixevolve/graphqlsuitecrm/graphql/GraphiQL/graphiql.min.js:17:14344
   at http://localhost/suitecrm/suitecrm-demo/vendor/lionixevolve/graphqlsuitecrm/graphql/GraphiQL/graphiql.min.js:14:13086
   at Array.reduce (<anonymous>)

Would you please suggest how to fix this issue and also we are not able to see any queries and mutations in docs.

Thanks

[mrbarletta]

That error is about introspection and tracked in issue #2 and couldn't be fixed using the current graphqlphp implementation, I was thinking about moving to https://github.com/webonyx/graphql-php for version 2

Nevertheless, queries will work just fine, if you want to see what modules are available take a look at this file https://github.com/lionixevolve/GraphQLSuiteCRM/blob/master/graphql/Schema/SuiteCRMSchema.php#L21

you can see the module names, I tried to respect sugar bean names as much as possible

[rigalpatel001]

Hello, Query is Working fine using below URL http://localhost/suitecrm/suitecrm-demo/vendor/lionixevolve/graphqlsuitecrm/graphql/GraphiQL/

We are trying to get data using rect-apollo but getting getting Index.html content in response. Request is successfully sent to graphql but there is issue in response.

Would you please suggest possible way to fix this issue.

Thanks.

[mrbarletta]

We do also use react apollo, this is how we define the constants

export let CRM_LXREST_ENDPOINT;
export let CRM_NATIVE_ENDPOINT;
export let CRM_DOMAIN;
export let BASENAME;
export let APOLLODEVTOOLSENABLED;
if (process.env.NODE_ENV === "production") {
  CRM_DOMAIN = "https://crm.com";
  CRM_NATIVE_ENDPOINT = "/service/v4_1/rest.php";
  CRM_LXREST_ENDPOINT = "/vendor/lionixevolve/graphqlsuitecrm/rest.php";
  BASENAME = "/app";
} else {
  //DEV
  APOLLODEVTOOLSENABLED = true;
  CRM_DOMAIN = "http://localhost:3000/";
  CRM_NATIVE_ENDPOINT = "/service/v4_1/rest.php";
  CRM_LXREST_ENDPOINT = "/vendor/lionixevolve/graphqlsuitecrm/rest.php";
  BASENAME = "/";
}

This is how we use apollo

const httpUri = CRM_DOMAIN + CRM_LXREST_ENDPOINT + "/graphql";

const httpLink = createHttpLink({
    uri: httpUri,
    credentials: "include"
});

const client = new ApolloClient({
    link: httpLink,
    cache: new InMemoryCache()
});

with the client then we use it in the high level apolloprovider

              <Provider store={store}>
                <ApolloProvider client={client}>
                    <Router
                        basename={BASENAME}
                        forceRefresh={false}
                        history={history}
                    >
                        <MuiThemeProvider theme={theme}>
                            <Route component={Main} />
                        </MuiThemeProvider>
                    </Router>
                </ApolloProvider>
            </Provider>

after that in each component we need to make calls

    export default withRouter(
    withApollo(
        compose(
            connect(mapStateToProps, mapDispatchToProps),
            graphql(callMutationQuery, callMutationOptions),
            graphql(oppMutationQuery, oppMutationOptions)
        )(Opportunities)
    )
);

And here an example of a mutation

const oppMutationQuery = gql`
    mutation createOpportunity($id: String, $sales_stage: String) {
        createOpportunity(id: $id, sales_stage: $sales_stage) {
            id
        }
    }
`;
const oppMutationOptions = { name: "oppMutation" };

And this is a function we use for showing the list of opportunities

    getOpportunities = () => {
        this.startSpin();
        const opportunityQuery = gql`
            query opportunity {
                opportunities {
                    id
                    name
                    date_entered
                    created_by
                    description
                    opportunity_type
                    sales_stage
                    lxcode_c
                    contacts {
                        first_name
                        last_name
                        lastname2_c
                        accounts {
                            id
                            name
                        }
                    }
                    assigned_user_details {
                        first_name
                        last_name
                        user_name
                        id
                    }
                    created_user_details {
                        id
                        first_name
                        last_name
                        user_name
                    }
                }
            }
        `;
        var opportunityQueryResults = this.props.client.query({
            query: opportunityQuery,
            variables: {},
            fetchPolicy: "network-only"
        });
        opportunityQueryResults
            .then(result => {
                if (result.data.opportunities) {
                    let opportunities = [];
                    result.data.opportunities.map(opp => {
                        opportunities.push({
                            id: opp.id,
                            opp_number: opp.lxcode_c,
                            name: opp.name,
                            date_entered: opp.date_entered,
                            description: opp.description,
                            opportunity_type: opp.opportunity_type,
                            sales_stage: opp.sales_stage,
                            client: opp.contacts
                                ? opp.contacts[0].first_name +
                                  " " +
                                  opp.contacts[0].last_name +
                                  " " +
                                  opp.contacts[0].lastname2_c
                                : "",
                            user_created: opp.created_user_details
                                ? `${opp.created_user_details.first_name} ${
                                      opp.created_user_details.last_name
                                  }`
                                : "",
                            user_assigned: opp.assigned_user_details
                                ? `${opp.assigned_user_details.first_name} ${
                                      opp.assigned_user_details.last_name
                                  }`
                                : ""
                        });
                        return opportunities;
                    });
                    this.setState({ oppList: opportunities });
                } else {
                    this.setState({ oppList: [] });
                }
                this.stopSpin();
            })
            .catch(error => {
                console.error("error: ", error);
            });
    };

Of course you have to adapt the example but you can get the idea

[rigalpatel001]

Hello

Thanks for your quick support and help. I have fix cross origin issue and i got data in react app. I have also check mutation but i am not able find update and delete mutations. t we are gonna use your library for very large enterprise level projects .

I am happy to discuss with you we are team of two developer we are busy with exploring your library and i am 100% sure we will need lots of customisation on this library.

Would you please give me your email/skype Id?

Thanks

[mrbarletta]

Hi Rigal, I just accepted your FB request, ,lets keep the chat there

[mrbarletta]

Regarding update, delete.

Update you just have to include the ID in the mutation variables, that will make the mutation an update.

For deleted, due to SuiteCRM doing soft delete (no actual record deleted) this is just an UPDATE mutation but with DELETED=1.