Here is my approach to querying data from a Graphql engine.
export GraphQLWrap <TData, TParam = {}>({
query,
extractData,
children,
queryVariables,
skip,
}: AsyncWrapProps<TData, TParam>) => {
return (
<ApolloConsumer>
{client => {
const loadOptions = (
searchString: string,
): Promise<SelectOptionType[]> =>
skip
? Promise.resolve([])
: client
.query<
TData,
| AsyncSearchVars
| (AsyncSearchVars & TParam)
>({
query,
variables: {
search: `${searchString || ""}%`,
...queryVariables,
},
})
.then(extractData);
return <div>{children(loadOptions)}</div>;
}}
</ApolloConsumer>
);
};
I have included this code snippet for handling Graphql queries. Any suggestions on how I can enhance it to handle potential GraphQL errors would be greatly appreciated. Thank you.
This is the method I use to interact with the component above:
const extractData = ({ data }: ApolloResult<AccountData>) =>
data && data.vitm_account ? data.vitm_account : [];
return (
<GraphQLWrap query={ACC_NAME_QUERY} extractData={extractData}>
{accountSelect}
</GraphQLWrap>
);