Situation
Due to the compatible issue, I am using ApolloClient to form my AWS AppSync API client, so that I can use ApolloProvider to pass the client to different sub-component.
In the sub-component, I call useQuery to fetch data, but the problem is the output always give me default "undefined" value.
Code in Top Level
import awsconfig from '../aws-exports';
import { AUTH_TYPE } from 'aws-appsync';
import {
ApolloProvider,
ApolloClient,
ApolloLink,
HttpLink,
InMemoryCache,
} from "@apollo/client";
import { createAuthLink } from "aws-appsync-auth-link";
import { getUserDb, listUserDbs } from '../graphql/queries';
const link = ApolloLink.from([
createAuthLink({
url: awsconfig.aws_appsync_graphqlEndpoint,
region: awsconfig.aws_appsync_region,
auth: {
type: AUTH_TYPE.API_KEY,
apiKey: awsconfig.aws_appsync_apiKey,
},
}),
new HttpLink({ uri: awsconfig.aws_appsync_graphqlEndpoint }),
]);
const client = new ApolloClient({
link,
cache: new InMemoryCache(),
credentials: 'include'
});
function WithProvider (){
return (
<ApolloProvider client={client}>
<App />
</ApolloProvider>
)
}
export default WithProvider;
Code in sub-Component (usage of useQuery)
import { listUserDbs } from '../graphql/queries';
const GET_USER_PROFILE = gql(listUserDbs)
function App() {
const { loading, error, out_data, client } = useQuery(GET_USER_PROFILE);
if (loading) return <p>Loading...</p>;
if (error) return <p>Error :(</p>;
What test have I done?
- when I call query straight from client, it worked
client
.query({
query: gql`
query ListUserDbs(
$filter: Table
) {
listUserDBS(filter: $filter) {
items {
sub
}
nextToken
}
}
`
})
.then(result => console.log(result));
- when I ask useQuery to return client, it returns the same client I set up
const { loading, error, out_data, client } = useQuery(LIST_USER_PROFILE);
My guess of the issue
The issue is probably coming from useQuery but I don't know how to solve it.
