如何使用Gatsby创建的网站在Strapi中对数据进行变异?

时间:2019-08-08 23:03:50

标签: gatsby static-site strapi headless-cms

我想知道是否有可能在用gatsby创建的站点中编写变异查询。我要在Strapi中创建的数据将不会用于显示新信息,而只会存储数据。

有没有办法做到这一点?据我了解,盖茨比本身不会突变Strapi数据。

1 个答案:

答案 0 :(得分:2)

您需要向您的网站提供ApolloClient。最好的方法是在根目录下的gatsby-ssr.js和gatsby-browser.js中使用,然后像在下面的示例中一样使用react-apollo

client.js

import ApolloClient from "apollo-boost"

const token = "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJfaWQiOiI1ZDRhN2FlNjRlYzE1MzIxMTY0N2EzNWMiLCJpc0FkbWluIjp0cnVlLCJpYXQiOjE1NjU1OTI2ODcsImV4cCI6MTU2ODE4NDY4N30.FZIWJ7sWhmQo6MPgUbY2Js-uVMWY1kUdASvr2oyY6Sd"
const url = "http://localhost:1337"

export default new ApolloClient({
  uri: `${url}/graphql`,
  request: operation => {
    operation.setContext({
      headers: {
        Authorization: `Bearer ${token}`,
      },
    })
  },
})

gatsby-ssr.js和gatsby-browser.js


import React from 'react';
import { ApolloProvider } from 'react-apollo';
import { client } from './src/client';

export const wrapRootElement = ({ element }) => (
  <ApolloProvider client={client}>
    {element}
  </ApolloProvider>
);

postTemplate.js

import React from "react"
import { Mutation } from "react-apollo"
import gql from "graphql-tag"

const POST_MUTATION = gql`
  mutation PostMutation($description: String!, $url: String!) {
    post(description: $description, url: $url) {
      id
      createdAt
      url
      description
    }
  }
`
const PostTemplate = () => {
  const description = "example description"
  const url = "url"

  return (
    <Mutation mutation={POST_MUTATION} variables={{ description, url }}>
      {() => <button onClick={"... you'll implement this ?"}>Submit</button>}
    </Mutation>
  )
}

Export default PostTemplate

其他链接